1 | # parallel-webpack - Building multi-configs in parallel
|
2 |
|
3 | `parallel-webpack` allows you to run multiple webpack builds in parallel,
|
4 | spreading the work across your processors and thus helping to significantly speed
|
5 | up your build. For us at [trivago](http://www.trivago.com) it has reduced
|
6 | the build from 16 minutes to just 2 minutes - for 32 variants. That performance
|
7 | improvement naturally comes at the expense of utilizing all available CPU cores.
|
8 |
|
9 | ## Installation
|
10 |
|
11 | ```sh
|
12 | npm install parallel-webpack --save-dev
|
13 | ```
|
14 |
|
15 | You can choose whether to install `parallel-webpack` globally or locally.
|
16 | At [trivago](http://www.trivago.com), we keep our build tools locally to the project
|
17 | so that we have full control over its versions.
|
18 |
|
19 | ## Basic example
|
20 |
|
21 | Given a `webpack.config.js` like this:
|
22 |
|
23 | ```javascript
|
24 | module.exports = [{
|
25 | entry: 'pageA.js',
|
26 | output: {
|
27 | path: './dist',
|
28 | filename: 'pageA.bundle.js'
|
29 | }
|
30 | }, {
|
31 | entry: 'pageB.js',
|
32 | output: {
|
33 | path: './dist',
|
34 | filename: 'pageB.bundle.js'
|
35 | }
|
36 | }];
|
37 | ```
|
38 |
|
39 | `parallel-webpack` will run both specified builds in parallel.
|
40 |
|
41 | ## Variants example
|
42 |
|
43 | Sometimes, just using different configurations like above won't be enough and what
|
44 | you really want or need is the same configuration with some adjustments.
|
45 | `parallel-webpack` can help you with generating those `configuration variants` as
|
46 | well.
|
47 |
|
48 | ```javascript
|
49 | var createVariants = require('parallel-webpack').createVariants;
|
50 |
|
51 | // Those options will be mixed into every variant
|
52 | // and passed to the `createConfig` callback.
|
53 | var baseOptions = {
|
54 | preferredDevTool: process.env.DEVTOOL || 'eval'
|
55 | };
|
56 |
|
57 | // This object defines the potential option variants
|
58 | // the key of the object is used as the option name, its value must be an array
|
59 | // which contains all potential values of your build.
|
60 | var variants = {
|
61 | minified: [true, false],
|
62 | debug: [true, false],
|
63 | target: ['commonjs2', 'var', 'umd', 'amd']
|
64 | };
|
65 |
|
66 | function createConfig(options) {
|
67 | var plugins = [
|
68 | new webpack.optimize.DedupePlugin(),
|
69 | new webpack.optimize.OccurenceOrderPlugin(),
|
70 | new webpack.DefinePlugin({
|
71 | DEBUG: JSON.stringify(JSON.parse(options.debug))
|
72 | })
|
73 | ];
|
74 | if(options.minified) {
|
75 | plugins.push(new webpack.optimize.UglifyJsPlugin({
|
76 | sourceMap: false,
|
77 | compress: {
|
78 | warnings: false
|
79 | }
|
80 | }));
|
81 | }
|
82 | return {
|
83 | entry: './index.js',
|
84 | devtool: options.preferredDevTool,
|
85 | output: {
|
86 | path: './dist/',
|
87 | filename: 'MyLib.' +
|
88 | options.target +
|
89 | (options.minified ? '.min' : '') +
|
90 | (options.debug ? '.debug' : '')
|
91 | + '.js',
|
92 | libraryTarget: options.target
|
93 | },
|
94 | plugins: plugins
|
95 | };
|
96 | }
|
97 |
|
98 | module.exports = createVariants(baseOptions, variants, createConfig);
|
99 | ```
|
100 |
|
101 | The above configuration will create 16 variations of the build for you, which
|
102 | `parallel-webpack` will distribute among your processors for building.
|
103 |
|
104 | ```
|
105 | [WEBPACK] Building 16 targets in parallel
|
106 | [WEBPACK] Started building MyLib.umd.js
|
107 | [WEBPACK] Started building MyLib.umd.min.js
|
108 | [WEBPACK] Started building MyLib.umd.debug.js
|
109 | [WEBPACK] Started building MyLib.umd.min.debug.js
|
110 |
|
111 | [WEBPACK] Started building MyLib.amd.js
|
112 | [WEBPACK] Started building MyLib.amd.min.js
|
113 | [WEBPACK] Started building MyLib.amd.debug.js
|
114 | [WEBPACK] Started building MyLib.amd.min.debug.js
|
115 |
|
116 | [WEBPACK] Started building MyLib.commonjs2.js
|
117 | [WEBPACK] Started building MyLib.commonjs2.min.js
|
118 | [WEBPACK] Started building MyLib.commonjs2.debug.js
|
119 | [WEBPACK] Started building MyLib.commonjs2.min.debug.js
|
120 |
|
121 | [WEBPACK] Started building MyLib.var.js
|
122 | [WEBPACK] Started building MyLib.var.min.js
|
123 | [WEBPACK] Started building MyLib.var.debug.js
|
124 | [WEBPACK] Started building MyLib.var.min.debug.js
|
125 | ```
|
126 |
|
127 | ## Running the watcher
|
128 |
|
129 | One of the features that made webpack so popular is certainly its watcher which
|
130 | continously rebuilds your application.
|
131 |
|
132 | When using `parallel-webpack`, you can easily use the same feature as well by
|
133 | specifying the `--watch` option on the command line:
|
134 |
|
135 | ```
|
136 | parallel-webpack --watch
|
137 | ```
|
138 |
|
139 | ## Specifying retry limits
|
140 |
|
141 | As a side-effect of using `parallel-webpack`, an error will no longer lead to
|
142 | you having to restart webpack. Instead, `parallel-webpack` will keep retrying to
|
143 | build your application until you've fixed the problem.
|
144 |
|
145 | While that is highly useful for development it can be a nightmare for
|
146 | CI builds. Thus, when building with `parallel-webpack` in a CI context, you should
|
147 | consider to use the `--max-retries` (or `-m` option) to force `parallel-webpack` to give
|
148 | up on your build after a certain amount of retries:
|
149 |
|
150 | ```
|
151 | parallel-webpack --max-retries=3
|
152 | ```
|
153 |
|
154 | ## Specifying the configuration file
|
155 |
|
156 | When you need to use a configuration file that is not `webpack.config.js`, you can
|
157 | specify its name using the `--config` parameter:
|
158 |
|
159 | ```
|
160 | parallel-webpack --config=myapp.webpack.config.js
|
161 | ```
|
162 |
|
163 | ## Switch off statics (improves performance)
|
164 |
|
165 | While the statics generated by Webpack are very usually very useful, they also
|
166 | take time to generate and print and create a lot of visual overload if you don't
|
167 | actually need them.
|
168 |
|
169 | Since version *1.3.0*, generating them can be turned off:
|
170 |
|
171 | ```
|
172 | parallel-webpack --no-stats
|
173 | ```
|
174 |
|
175 | ## Limiting parallelism
|
176 |
|
177 | Under certain circumstances you might not want `parallel-webpack` to use all of your
|
178 | available CPUs for building your assets. In those cases, you can specify the `parallel`,
|
179 | or `p` for short, option to tell `parallel-webpack` how many CPUs it may use.
|
180 |
|
181 | ```
|
182 | parallel-webpack -p=2
|
183 | ```
|
184 |
|
185 |
|
186 | ## Configurable configuration
|
187 |
|
188 | Sometimes, you might want to access command line arguments within your `webpack.config.js`
|
189 | in order to create a more specific configuration.
|
190 |
|
191 | `parallel-webpack` will forward every parameter specified after `--` to the configuration
|
192 | as is:
|
193 |
|
194 | ```
|
195 | parallel-webpack -- --app=trivago
|
196 | ```
|
197 |
|
198 |
|
199 | Within `webpack.config.js`:
|
200 |
|
201 | ```
|
202 | console.log(process.argv);
|
203 | // => [ 'node', 'parallel-webpack', '--app=trivago' ]
|
204 | ```
|
205 |
|
206 | `parallel-webpack` adds the first two values to `process.argv` to ensure that there
|
207 | are no differences between various ways of invoking the `webpack.config.js`.
|
208 |
|
209 | ## Node.js API
|
210 |
|
211 | Just like webpack, you can also use `parallel-webpack` as an API from node.js:
|
212 |
|
213 | ```javascript
|
214 | var run = require('parallel-webpack').run,
|
215 | configPath = require.resolve('./webpack.config.js');
|
216 | run(configPath, {
|
217 | watch: false,
|
218 | maxRetries: 1,
|
219 | maxConcurrentWorkers: 2 // use 2 workers
|
220 | });
|
221 | ```
|
222 |
|
223 | ### createVariants
|
224 |
|
225 | #### createVariants(baseConfig: Object, variants: Object, configCallback: Function): Object[]
|
226 |
|
227 | Alters the given `baseConfig` with all possible `variants` and maps the result into
|
228 | a valid webpack configuration using the given `configCallback`.
|
229 |
|
230 | #### createVariants(variants: Object, configCallback: Function): Object[]
|
231 |
|
232 | Creates all possible variations as specified in the `variants` object and
|
233 | maps the result into a valid webpack configuration using the given `configCallback`.
|
234 |
|
235 | #### createVariants(baseConfig: Object, variants: Object): Object[]
|
236 |
|
237 | Alters the given `baseConfig` with all possible `variants` and returns it.
|
238 |
|
239 | #### createVariants(variants: Object): Object[]
|
240 |
|
241 | Creates all possible variations from the given `variants` and returns them as a flat array.
|