1 | # Replace loader for [Webpack](http://webpack.github.io/)
|
2 |
|
3 | Perform 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 |
|
11 | With release of 2.0.0 the loader is expected to be used in Node v4+ environment.
|
12 | Support for Node v3 and lower was dropped, but you can install and use the loader version of 1.3.0 in older environments.
|
13 |
|
14 | With release of 3.0.0 the loader is expected to be used with Webpack v5+.
|
15 | Support 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 |
|
19 | 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).
|
20 | 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.
|
21 |
|
22 | ### Plain replacement:
|
23 |
|
24 | Plain string replacement, no need to escape RegEx special characters.
|
25 |
|
26 | In your `webpack.config.js`:
|
27 |
|
28 | ```javascript
|
29 | module.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 |
|
48 | To 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,
|
50 | either specify it as string and add the `flags` option (as an empty string if you do not want any flags).
|
51 | In 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
|
53 | and this means that you should escape RegEx special characters in `search` if you want it to be replaced as a string.
|
54 |
|
55 | In your `webpack.config.js`:
|
56 |
|
57 | ```javascript
|
58 | module.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 | ```
|
74 | or
|
75 | ```javascript
|
76 | module.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 |
|
96 | Also, you can pass an array of search-replace pairs this way:
|
97 |
|
98 | In your `webpack.config.js`:
|
99 |
|
100 | ```javascript
|
101 | module.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 |
|
122 | You can specify a callback function to have dynamic replacement values.
|
123 |
|
124 | In your `webpack.config.js`:
|
125 |
|
126 | ```javascript
|
127 | module.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 |
|
147 | You can enable strict mode to ensure that the replacement was performed.
|
148 | Loader will throw exception if nothing was replaced or if `search` or `replace` options were not specified.
|
149 |
|
150 | In your `webpack.config.js`:
|
151 |
|
152 | ```javascript
|
153 | module.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 |
|
173 | Feel 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)
|