UNPKG

4.26 kBMarkdownView Raw
1# Replace loader for [Webpack](http://webpack.github.io/)
2
3Perform replacements (plain and regular expression) in the contents loaded by the loader.
4
5## Install:
6
7```bash
8$ yarn add --dev string-replace-loader
9```
10
11With release of 2.0.0 the loader is expected to be used in Node v4+ environment.
12Support for Node v3 and lower was dropped, but you can install and use the loader version of 1.3.0 in older environments.
13
14With release of 3.0.0 the loader is expected to be used with Webpack v5+.
15Support for Webpack v4 and lower was dropped, but you can install and use the loader version of 2.3.0 in older environments.
16
17## Usage:
18
19Loader 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).
20It 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.
21
22### Plain replacement:
23
24Plain string replacement, no need to escape RegEx special characters.
25
26In your `webpack.config.js`:
27
28```javascript
29module.exports = {
30 // ...
31 module: {
32 rules: [
33 {
34 test: /fileInWhichJQueryIsUndefined\.js$/,
35 loader: 'string-replace-loader',
36 options: {
37 search: '$',
38 replace: 'window.jQuery',
39 }
40 }
41 ]
42 }
43}
44```
45
46### RegEx replacement:
47
48To achieve regular expression replacement you should either specify the `search` option as
49[RegExp](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp) instance,
50either specify it as string and add the `flags` option (as an empty string if you do not want any flags).
51In the latter case, `search` and `flags` are being passed to the
52[RegExp](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp) constructor
53and this means that you should escape RegEx special characters in `search` if you want it to be replaced as a string.
54
55In your `webpack.config.js`:
56
57```javascript
58module.exports = {
59 // ...
60 module: {
61 rules: [
62 {
63 test: /fileInWhichJQueryIsUndefined\.js$/,
64 loader: 'string-replace-loader',
65 options: {
66 search: /\$/i,
67 replace: 'window.jQuery'
68 }
69 }
70 ]
71 }
72}
73```
74or
75```javascript
76module.exports = {
77 // ...
78 module: {
79 rules: [
80 {
81 test: /fileInWhichJQueryIsUndefined\.js$/,
82 loader: 'string-replace-loader',
83 options: {
84 search: '\$',
85 replace: 'window.jQuery',
86 flags: 'i'
87 }
88 }
89 ]
90 }
91}
92```
93
94### Multiple replacement:
95
96Also, you can pass an array of search-replace pairs this way:
97
98In your `webpack.config.js`:
99
100```javascript
101module.exports = {
102 // ...
103 module: {
104 rules: [
105 {
106 test: /\.js$/,
107 loader: 'string-replace-loader',
108 options: {
109 multiple: [
110 { search: 'jQuery', replace: 'window.$' },
111 { search: '_', replace: 'window.lodash' }
112 ]
113 }
114 }
115 ]
116 }
117}
118```
119
120### Callback replacement
121
122You can specify a callback function to have dynamic replacement values.
123
124In your `webpack.config.js`:
125
126```javascript
127module.exports = {
128 // ...
129 module: {
130 rules: [
131 {
132 test: /\.js$/,
133 loader: 'string-replace-loader',
134 options: {
135 search: '^Hello, (.*)!$',
136 replace: (match, p1, offset, string) => `Bonjour, ${p1.toUpperCase()}!`,
137 flags: 'g'
138 }
139 }
140 ]
141 }
142}
143```
144
145### Strict mode replacement:
146
147You can enable strict mode to ensure that the replacement was performed.
148Loader will throw exception if nothing was replaced or if `search` or `replace` options were not specified.
149
150In your `webpack.config.js`:
151
152```javascript
153module.exports = {
154 // ...
155 module: {
156 rules: [
157 {
158 test: /fileInWhichJQueryIsUndefined\.js$/,
159 loader: 'string-replace-loader',
160 options: {
161 search: 'jQuery',
162 replace: 'window.$',
163 strict: true
164 }
165 }
166 ]
167 }
168}
169```
170
171## Contributing:
172
173Feel free to open issues to propose stuff and participate. Pull requests are also welcome.
174
175## Licence:
176
177[MIT](http://en.wikipedia.org/wiki/MIT_License)