Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/artembatura/modify-source-webpack-plugin
Simple webpack plugin for modifying modules source
https://github.com/artembatura/modify-source-webpack-plugin
compilation edit file modify module plugin source webpack
Last synced: 4 days ago
JSON representation
Simple webpack plugin for modifying modules source
- Host: GitHub
- URL: https://github.com/artembatura/modify-source-webpack-plugin
- Owner: artembatura
- License: mit
- Created: 2019-02-05T23:43:20.000Z (almost 6 years ago)
- Default Branch: main
- Last Pushed: 2023-10-05T03:59:39.000Z (about 1 year ago)
- Last Synced: 2024-12-19T01:07:06.151Z (12 days ago)
- Topics: compilation, edit, file, modify, module, plugin, source, webpack
- Language: TypeScript
- Homepage:
- Size: 96.9 MB
- Stars: 38
- Watchers: 1
- Forks: 7
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/modify-source-webpack-plugin)
[](https://github.com/artembatura/modify-source-webpack-plugin)
# [modify-source-webpack-plugin](https://www.npmjs.com/package/modify-source-webpack-plugin)
Webpack plugin for modifying modules source.
## Compatibility
| Webpack Version | Plugin version | Status |
| --------------- | -------------- | ------------------------ |
| ^5.0.0 | ^4.0.0 |
✅
|
| ^4.37.0 | ^4.0.0 | ✅
|
## [Migration guide](https://github.com/artembatura/modify-source-webpack-plugin/blob/master/CHANGELOG.md#migration-guide-3x-to-4x) from version 3
## Installation
### NPM
```
npm i -D modify-source-webpack-plugin
```
### Yarn
```
yarn add -D modify-source-webpack-plugin
```
## Import
### ES6/TypeScript
```js
import { ModifySourcePlugin } from 'modify-source-webpack-plugin';
```
### CJS
```js
const { ModifySourcePlugin } = require('modify-source-webpack-plugin');
```
## Usage
**webpack.config.js**
```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
```js
plugins: [
new ModifySourcePlugin({
rules: [
{
test: /index\.js$/
}
]
})
];
```
#### Example with Function
```js
plugins: [
new ModifySourcePlugin({
rules: [
{
test: module =>
module.source().source().includes('my-secret-module-marker')
}
]
})
];
```
### `rules[].operations`
Type: `AbstractOperation[]` (supported `ConcatOperation`, `ReplaceOperation`)
`Required`
List of operations which describes how modules should be modified.
:warning: Operations should make syntax compatible changes. For example all unsupported syntax will break your build or create errors in runtime.
#### Example with concat operation
```js
import {
ModifySourcePlugin,
ConcatOperation
} from 'modify-source-webpack-plugin';
module.exports = {
plugins: [
new ModifySourcePlugin({
rules: [
{
test: /my-file\.js$/,
operations: [
new ConcatOperation(
'start',
'// Proprietary and confidential.\n\n'
),
new ConcatOperation(
'end',
'\n\n// File is written by me, January 2022'
)
]
}
]
})
]
};
```
#### Example with replace operation
```js
import {
ModifySourcePlugin,
ReplaceOperation
} from 'modify-source-webpack-plugin';
module.exports = {
plugins: [
new ModifySourcePlugin({
rules: [
{
test: /my-file\.js$/,
operations: [
new ReplaceOperation('once', 'searchValue', 'replaceValue'),
new ReplaceOperation('all', 'searchValue', 'replaceValue')
]
}
]
})
]
};
```
#### Bad example
```js
module.exports = {
plugins: [
new ModifySourcePlugin({
rules: [
{
test: /my-file\.js$/,
operations: [
new ConcatOperation('start', 'Haha I break your build LOL')
]
}
]
})
]
};
```
### `debug`
Type: `boolean`
For easier debugging. Print some logs in the console.
## Advanced Usage
### Compile-time constants
Constants related to information about files that we change.
| Constant | Description |
| ------------ | ------------ |
| `$FILE_PATH` | Path to file |
| `$FILE_NAME` | File name |
```js
plugins: [
new ModifySourcePlugin({
rules: [
{
test: /my-file\.js$/,
operations: [
new ConcatOperation(
'end',
'\n\n // This file is on the path - $FILE_PATH and filename - $FILE_NAME'
)
]
}
]
})
];
```
### Put content before and after file contents
my-file.js (clickable)
```js
console.log('Hello world!');
```
`webpack.config.js`
```js
plugins: [
new ModifySourcePlugin({
rules: [
{
test: /my-file\.js$/,
operations: [
new ConcatOperation('start', '// Something before file contents.\n'),
new ConcatOperation('end', '\n// Something after file contents.')
]
}
]
})
];
```
Result my-file.js (clickable)
```js
// Something before file contents.
console.log('Hello world!');
// Something after file contents.
```
### Replace plug with a content
my-component.jsx (clickable)
```jsx
function HelloMessage(props) {
return (
Hello, $NAME
{
props.userLogout();
alert('Goodbye, $NAME!');
}}
>
$EXIT_LABEL
);
}
```
`webpack.config.js`
```js
plugins: [
new ModifySourcePlugin({
rules: [
{
test: /my-component\.jsx$/,
operations: [
new ReplaceOperation('all', '$NAME', 'Artem Batura'),
new ReplaceOperation('once', '$EXIT_LABEL', 'Exit')
// new ReplaceOperation('once', '$EXIT_LABEL', 'Leave')
]
}
]
})
];
```
Result my-component.jsx (clickable)
```jsx
function HelloMessage(props) {
return (
Hello, Artem Batura
{
props.userLogout();
alert('Goodbye, Artem Batura!');
}}
>
Exit
);
}
```
### Place code/text fragment in required position
my-component.jsx (clickable)
```jsx
function HelloMessage(props) {
$MY_DEBUG_CODE;
return (
Hello, user! $MY_USER_COMPONENT
props.userLogout()}>Exit
);
}
```
`webpack.config.js`
```js
plugins: [
new ModifySourcePlugin({
rules: [
{
test: /my-component\.js$/,
operations: [
new ReplaceOperation(
'once',
'$MY_DEBUG_CODE',
'console.log("props", props)'
),
new ReplaceOperation(
'once',
'$MY_USER_COMPONENT',
'
compilation-time markup'
)
]
}
]
})
];
```
Result my-component.jsx (clickable)
```jsx
function HelloMessage(props) {
console.log('props', props);
return (
Hello, user!
compilation-time markup
props.userLogout()}>Exit
);
}
```