UNPKG

7.29 kBMarkdownView Raw
1# parallel-webpack - Building multi-configs in parallel
2
3`parallel-webpack` allows you to run multiple webpack builds in parallel,
4spreading the work across your processors and thus helping to significantly speed
5up your build. For us at [trivago](http://www.trivago.com) it has reduced
6the build from 16 minutes to just 2 minutes - for 32 variants. That performance
7improvement naturally comes at the expense of utilizing all available CPU cores.
8
9## Installation
10
11```sh
12npm install parallel-webpack --save-dev
13```
14
15You can choose whether to install `parallel-webpack` globally or locally.
16At [trivago](http://www.trivago.com), we keep our build tools locally to the project
17so that we have full control over its versions.
18
19## Basic example
20
21Given a `webpack.config.js` like this:
22
23```javascript
24module.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
43Sometimes, just using different configurations like above won't be enough and what
44you really want or need is the same configuration with some adjustments.
45`parallel-webpack` can help you with generating those `configuration variants` as
46well.
47
48```javascript
49var createVariants = require('parallel-webpack').createVariants;
50
51// Those options will be mixed into every variant
52// and passed to the `createConfig` callback.
53var 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.
60var variants = {
61 minified: [true, false],
62 debug: [true, false],
63 target: ['commonjs2', 'var', 'umd', 'amd']
64};
65
66function 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
98module.exports = createVariants(baseOptions, variants, createConfig);
99```
100
101The 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
129One of the features that made webpack so popular is certainly its watcher which
130continously rebuilds your application.
131
132When using `parallel-webpack`, you can easily use the same feature as well by
133specifying the `--watch` option on the command line:
134
135```
136parallel-webpack --watch
137```
138
139## Specifying retry limits
140
141As a side-effect of using `parallel-webpack`, an error will no longer lead to
142you having to restart webpack. Instead, `parallel-webpack` will keep retrying to
143build your application until you've fixed the problem.
144
145While that is highly useful for development it can be a nightmare for
146CI builds. Thus, when building with `parallel-webpack` in a CI context, you should
147consider to use the `--max-retries` (or `-m` option) to force `parallel-webpack` to give
148up on your build after a certain amount of retries:
149
150```
151parallel-webpack --max-retries=3
152```
153
154## Specifying the configuration file
155
156When you need to use a configuration file that is not `webpack.config.js`, you can
157specify its name using the `--config` parameter:
158
159```
160parallel-webpack --config=myapp.webpack.config.js
161```
162
163## Switch off statics (improves performance)
164
165While the statics generated by Webpack are very usually very useful, they also
166take time to generate and print and create a lot of visual overload if you don't
167actually need them.
168
169Since version *1.3.0*, generating them can be turned off:
170
171```
172parallel-webpack --no-stats
173```
174
175## Limiting parallelism
176
177Under certain circumstances you might not want `parallel-webpack` to use all of your
178available CPUs for building your assets. In those cases, you can specify the `parallel`,
179or `p` for short, option to tell `parallel-webpack` how many CPUs it may use.
180
181```
182parallel-webpack -p=2
183```
184
185
186## Configurable configuration
187
188Sometimes, you might want to access command line arguments within your `webpack.config.js`
189in order to create a more specific configuration.
190
191`parallel-webpack` will forward every parameter specified after `--` to the configuration
192as is:
193
194```
195parallel-webpack -- --app=trivago
196```
197
198
199Within `webpack.config.js`:
200
201```
202console.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
207are no differences between various ways of invoking the `webpack.config.js`.
208
209## Node.js API
210
211Just like webpack, you can also use `parallel-webpack` as an API from node.js:
212
213```javascript
214var run = require('parallel-webpack').run,
215 configPath = require.resolve('./webpack.config.js');
216run(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
227Alters the given `baseConfig` with all possible `variants` and maps the result into
228a valid webpack configuration using the given `configCallback`.
229
230#### createVariants(variants: Object, configCallback: Function): Object[]
231
232Creates all possible variations as specified in the `variants` object and
233maps the result into a valid webpack configuration using the given `configCallback`.
234
235#### createVariants(baseConfig: Object, variants: Object): Object[]
236
237Alters the given `baseConfig` with all possible `variants` and returns it.
238
239#### createVariants(variants: Object): Object[]
240
241Creates all possible variations from the given `variants` and returns them as a flat array.