modify-source-webpack-plugin
modify-source-webpack-plugin copied to clipboard
Simple webpack plugin for modifying modules source
modify-source-webpack-plugin
Webpack Plugin for modifying modules source.
Compatibility
Webpack Version | Plugin version | Status |
---|---|---|
^5.0.0 | ^3.0.0 | ✅ |
^4.37.0 | ^3.0.0 | ✅ |
Installation
NPM
npm i -D modify-source-webpack-plugin@next
Yarn
yarn add -D modify-source-webpack-plugin@next
Import
ES6/TypeScript
import { ModifySourcePlugin } from 'modify-source-webpack-plugin';
CJS
const { ModifySourcePlugin } = require('modify-source-webpack-plugin');
Usage
webpack.config.js
module.exports = {
plugins: [new ModifySourcePlugin(options)]
};
Options
rules[].test
Type: RegExp | ((module: webpack.NormalModule) => boolean)
Required
test
is RegExp or function, which used to determinate which modules should be modified.
RegExp
will be applied to full module path (based on userRequest
).
function
will be applied to NormalModule
.
Example with RegExp
module.exports = {
plugins: [
new ModifySourcePlugin({
rules: [
{
test: /index\.js$/
}
]
})
]
};
Example with Function
module.exports = {
plugins: [
new ModifySourcePlugin({
rules: [
{
test: module =>
module.source().source().includes('my-secret-module-marker')
}
]
})
]
};
rules[].modify
Type: (source: string, path: string) => string
Required
Function accept a source and file path. Should return a modified source.
WARNING: modify function should make syntax compatible changes, for example all unsupported syntax will break your build or create errors in runtime.
Example
module.exports = {
plugins: [
new ModifySourcePlugin({
rules: [
{
test: /my-file\.js$/,
modify: (src, path) =>
src +
`\n\n// This file (${path}) is written by me. All rights reserved`
}
]
})
]
};
Bad example (never do this)
module.exports = {
plugins: [
new ModifySourcePlugin({
rules: [
{
test: /my-file\.js$/,
modify: src => src + `haha I break your build LOL`
}
]
})
]
};
debug
Type: boolean
For slightly easier debugging. Print logs in the console.