chars-replace-loader
Version:
Replace loader for Webpack
177 lines (145 loc) • 4.04 kB
Markdown
Perform replacements (plain and regular expression) in the contents loaded by the loader.
## Install:
```bash
$ npm install --save-dev string-replace-loader
```
With release of 2.0.0 the loader is expected to be used in Node v4+ environment.
Support for Node v3 and lower was dropped, but you can install and use the loader version of 1.3.0 in older environments.
## Usage:
Loader allows to perform replacements in a way [String.prototype.replace()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace) does (loader uses it internally).
It means that if you want to replace all occurrences, you should use RegExp-like string in `options.search` with `g` flag in `options.flags`, etc.
### Plain replacement:
Plain string replacement, no need to escape RegEx special characters.
In your `webpack.config.js`:
```javascript
module.exports = {
// ...
module: {
rules: [
{
test: /fileInWhichJQueryIsUndefined\.js$/,
loader: 'string-replace-loader',
options: {
search: '$',
replace: 'window.jQuery',
}
}
]
}
}
```
To achieve regular expression replacement you should specify the `flags` option
(as an empty string if you do not want any flags). In this case, `search` and `flags` are being
passed to the [RegExp](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp) constructor
and this means that you should escape RegEx special characters in `search` if you want it to be replaced as a string.
In your `webpack.config.js`:
```javascript
module.exports = {
// ...
module: {
rules: [
{
test: /fileInWhichJQueryIsUndefined\.js$/,
loader: 'string-replace-loader',
options: {
search: '\$',
replace: 'window.jQuery',
flags: 'i'
}
}
]
}
}
```
Also, you can pass an array of search-replace pairs this way:
In your `webpack.config.js`:
```javascript
module.exports = {
// ...
module: {
rules: [
{
test: /\.js$/,
loader: 'string-replace-loader',
options: {
multiple: [
{ search: 'jQuery', replace: 'window.$' },
{ search: '_', replace: 'window.lodash' }
]
}
}
]
}
}
```
You can specify a callback function to have dynamic replacement values.
In your `webpack.config.js`:
```javascript
module.exports = {
// ...
module: {
rules: [
{
test: /\.js$/,
loader: 'string-replace-loader',
options: {
search: '^Hello, (.*)!$',
replace: (match, p1, offset, string) => `Bonjour, ${p1.toUpperCase()}!`,
flags: 'g'
}
}
]
}
}
```
```javascript
module.exports = {
// ...
module: {
rules: [
{
test: /\.js$/,
loader: 'string-replace-loader',
options: {
search: '^Hello, (.*)!$',
replace(match, p1, offset, string) {
console.log(this); // 'this' equal to loader context
return `Bonjour, ${p1.toUpperCase()}!`;
},
flags: 'g'
}
}
]
}
}
```
You can enable strict mode to ensure that the replacement was performed.
Loader will throw exception if nothing was replaced or if `search` or `replace` options were not specified.
In your `webpack.config.js`:
```javascript
module.exports = {
// ...
module: {
rules: [
{
test: /fileInWhichJQueryIsUndefined\.js$/,
loader: 'string-replace-loader',
options: {
search: 'jQuery',
replace: 'window.$',
strict: true
}
}
]
}
}
```
Feel free to open issues to propose stuff and participate. Pull requests are also welcome.
[ ](http://en.wikipedia.org/wiki/MIT_License)