UNPKG

15.3 kBMarkdownView Raw
1<div align="center">
2 <a href="https://github.com/webpack/webpack">
3 <img width="200" height="200" src="https://webpack.js.org/assets/icon-square-big.svg">
4 </a>
5</div>
6
7[![npm][npm]][npm-url]
8[![node][node]][node-url]
9[![deps][deps]][deps-url]
10[![tests][tests]][tests-url]
11[![cover][cover]][cover-url]
12[![chat][chat]][chat-url]
13[![size][size]][size-url]
14
15# terser-webpack-plugin-legacy
16
17This plugin uses [terser](https://github.com/terser-js/terser) to minify your JavaScript.
18
19## Requirements
20
21This module requires a minimum of Node v6.9.0 and Webpack v3.0.0.
22
23Webpack v4 users should use the non-legacy `terser-webpack-plugin`.
24
25## Getting Started
26
27To begin, you'll need to install `terser-webpack-plugin-legacy`:
28
29```console
30$ npm install terser-webpack-plugin-legacy --save-dev
31```
32
33Then add the plugin to your `webpack` config. For example:
34
35**webpack.config.js**
36
37```js
38const TerserPlugin = require('terser-webpack-plugin-legacy');
39
40module.exports = {
41 optimization: {
42 minimizer: [new TerserPlugin()],
43 },
44};
45```
46
47And run `webpack` via your preferred method.
48
49## Options
50
51### `test`
52
53Type: `String|RegExp|Array<String|RegExp>`
54Default: `/\.m?js(\?.*)?$/i`
55
56Test to match files against.
57
58**webpack.config.js**
59
60```js
61module.exports = {
62 optimization: {
63 minimizer: [
64 new TerserPlugin({
65 test: /\.js(\?.*)?$/i,
66 }),
67 ],
68 },
69};
70```
71
72### `include`
73
74Type: `String|RegExp|Array<String|RegExp>`
75Default: `undefined`
76
77Files to include.
78
79**webpack.config.js**
80
81```js
82module.exports = {
83 optimization: {
84 minimizer: [
85 new TerserPlugin({
86 include: /\/includes/,
87 }),
88 ],
89 },
90};
91```
92
93### `exclude`
94
95Type: `String|RegExp|Array<String|RegExp>`
96Default: `undefined`
97
98Files to exclude.
99
100**webpack.config.js**
101
102```js
103module.exports = {
104 optimization: {
105 minimizer: [
106 new TerserPlugin({
107 exclude: /\/excludes/,
108 }),
109 ],
110 },
111};
112```
113
114### `chunkFilter`
115
116Type: `Function<(chunk) -> boolean>`
117Default: `() => true`
118
119Allowing to filter which chunks should be uglified (by default all chunks are uglified).
120Return `true` to uglify the chunk, `false` otherwise.
121
122**webpack.config.js**
123
124```js
125module.exports = {
126 optimization: {
127 minimizer: [
128 new TerserPlugin({
129 chunkFilter: (chunk) => {
130 // Exclude uglification for the `vendor` chunk
131 if (chunk.name === 'vendor') {
132 return false;
133 }
134
135 return true;
136 },
137 }),
138 ],
139 },
140};
141```
142
143### `cache`
144
145Type: `Boolean|String`
146Default: `false`
147
148Enable file caching.
149Default path to cache directory: `node_modules/.cache/terser-webpack-plugin`.
150
151> ℹ️ If you use your own `minify` function please read the `minify` section for cache invalidation correctly.
152
153#### `Boolean`
154
155Enable/disable file caching.
156
157**webpack.config.js**
158
159```js
160module.exports = {
161 optimization: {
162 minimizer: [
163 new TerserPlugin({
164 cache: true,
165 }),
166 ],
167 },
168};
169```
170
171#### `String`
172
173Enable file caching and set path to cache directory.
174
175**webpack.config.js**
176
177```js
178module.exports = {
179 optimization: {
180 minimizer: [
181 new TerserPlugin({
182 cache: 'path/to/cache',
183 }),
184 ],
185 },
186};
187```
188
189### `cacheKeys`
190
191Type: `Function<(defaultCacheKeys, file) -> Object>`
192Default: `defaultCacheKeys => defaultCacheKeys`
193
194Allows you to override default cache keys.
195
196Default cache keys:
197
198```js
199({
200 terser: require('terser/package.json').version, // terser version
201 'terser-webpack-plugin': require('../package.json').version, // plugin version
202 'terser-webpack-plugin-options': this.options, // plugin options
203 path: compiler.outputPath ? `${compiler.outputPath}/${file}` : file, // asset path
204 hash: crypto
205 .createHash('md4')
206 .update(input)
207 .digest('hex'), // source file hash
208});
209```
210
211**webpack.config.js**
212
213```js
214module.exports = {
215 optimization: {
216 minimizer: [
217 new TerserPlugin({
218 cache: true,
219 cacheKeys: (defaultCacheKeys, file) => {
220 defaultCacheKeys.myCacheKey = 'myCacheKeyValue';
221
222 return defaultCacheKeys;
223 },
224 }),
225 ],
226 },
227};
228```
229
230### `parallel`
231
232Type: `Boolean|Number`
233Default: `false`
234
235Use multi-process parallel running to improve the build speed.
236Default number of concurrent runs: `os.cpus().length - 1`.
237
238> ℹ️ Parallelization can speedup your build significantly and is therefore **highly recommended**.
239
240#### `Boolean`
241
242Enable/disable multi-process parallel running.
243
244**webpack.config.js**
245
246```js
247module.exports = {
248 optimization: {
249 minimizer: [
250 new TerserPlugin({
251 parallel: true,
252 }),
253 ],
254 },
255};
256```
257
258#### `Number`
259
260Enable multi-process parallel running and set number of concurrent runs.
261
262**webpack.config.js**
263
264```js
265module.exports = {
266 optimization: {
267 minimizer: [
268 new TerserPlugin({
269 parallel: 4,
270 }),
271 ],
272 },
273};
274```
275
276### `sourceMap`
277
278Type: `Boolean`
279Default: `false`
280
281Use source maps to map error message locations to modules (this slows down the compilation).
282If you use your own `minify` function please read the `minify` section for handling source maps correctly.
283
284> ⚠️ **`cheap-source-map` options don't work with this plugin**.
285
286**webpack.config.js**
287
288```js
289module.exports = {
290 optimization: {
291 minimizer: [
292 new TerserPlugin({
293 sourceMap: true,
294 }),
295 ],
296 },
297};
298```
299
300### `minify`
301
302Type: `Function`
303Default: `undefined`
304
305Allows you to override default minify function.
306By default plugin uses [terser](https://github.com/terser-js/terser) package.
307Useful for using and testing unpublished versions or forks.
308
309> ⚠️ **Always use `require` inside `minify` function when `parallel` option enabled**.
310
311**webpack.config.js**
312
313```js
314module.exports = {
315 optimization: {
316 minimizer: [
317 new TerserPlugin({
318 minify: (file, sourceMap) => {
319 const extractedComments = [];
320
321 // Custom logic for extract comments
322
323 const { error, map, code, warnings } = require('uglify-module') // Or require('./path/to/uglify-module')
324 .minify(file, {
325 /* Your options for minification */
326 });
327
328 return { error, map, code, warnings, extractedComments };
329 },
330 }),
331 ],
332 },
333};
334```
335
336### `terserOptions`
337
338Type: `Object`
339Default: [default](https://github.com/terser-js/terser#minify-options)
340
341Terser minify [options](https://github.com/terser-js/terser#minify-options).
342
343**webpack.config.js**
344
345```js
346module.exports = {
347 optimization: {
348 minimizer: [
349 new TerserPlugin({
350 terserOptions: {
351 ecma: undefined,
352 warnings: false,
353 parse: {},
354 compress: {},
355 mangle: true, // Note `mangle.properties` is `false` by default.
356 module: false,
357 output: null,
358 toplevel: false,
359 nameCache: null,
360 ie8: false,
361 keep_classnames: undefined,
362 keep_fnames: false,
363 safari10: false,
364 },
365 }),
366 ],
367 },
368};
369```
370
371### `extractComments`
372
373Type: `Boolean|String|RegExp|Function<(node, comment) -> Boolean|Object>|Object`
374Default: `false`
375
376Whether comments shall be extracted to a separate file, (see [details](https://github.com/webpack/webpack/commit/71933e979e51c533b432658d5e37917f9e71595a)).
377By default extract only comments using `/^\**!|@preserve|@license|@cc_on/i` regexp condition and remove remaining comments.
378If the original file is named `foo.js`, then the comments will be stored to `foo.js.LICENSE`.
379The `terserOptions.output.comments` option specifies whether the comment will be preserved, i.e. it is possible to preserve some comments (e.g. annotations) while extracting others or even preserving comments that have been extracted.
380
381#### `Boolean`
382
383Enable/disable extracting comments.
384
385**webpack.config.js**
386
387```js
388module.exports = {
389 optimization: {
390 minimizer: [
391 new TerserPlugin({
392 extractComments: true,
393 }),
394 ],
395 },
396};
397```
398
399#### `String`
400
401Extract `all` or `some` (use `/^\**!|@preserve|@license|@cc_on/i` RegExp) comments.
402
403**webpack.config.js**
404
405```js
406module.exports = {
407 optimization: {
408 minimizer: [
409 new TerserPlugin({
410 extractComments: 'all',
411 }),
412 ],
413 },
414};
415```
416
417#### `RegExp`
418
419All comments that match the given expression will be extracted to the separate file.
420
421**webpack.config.js**
422
423```js
424module.exports = {
425 optimization: {
426 minimizer: [
427 new TerserPlugin({
428 extractComments: /@extract/i,
429 }),
430 ],
431 },
432};
433```
434
435#### `Function<(node, comment) -> Boolean>`
436
437All comments that match the given expression will be extracted to the separate file.
438
439**webpack.config.js**
440
441```js
442module.exports = {
443 optimization: {
444 minimizer: [
445 new TerserPlugin({
446 extractComments: (astNode, comment) => {
447 if (/@extract/i.test(comment.value)) {
448 return true;
449 }
450
451 return false;
452 },
453 }),
454 ],
455 },
456};
457```
458
459#### `Object`
460
461Allow to customize condition for extract comments, specify extracted file name and banner.
462
463**webpack.config.js**
464
465```js
466module.exports = {
467 optimization: {
468 minimizer: [
469 new TerserPlugin({
470 extractComments: {
471 condition: /^\**!|@preserve|@license|@cc_on/i,
472 filename: (file) => {
473 return `${file}.LICENSE`;
474 },
475 banner: (licenseFile) => {
476 return `License information can be found in ${licenseFile}`;
477 },
478 },
479 }),
480 ],
481 },
482};
483```
484
485##### `condition`
486
487Type: `Boolean|String|RegExp|Function<(node, comment) -> Boolean|Object>`
488
489Condition what comments you need extract.
490
491**webpack.config.js**
492
493```js
494module.exports = {
495 optimization: {
496 minimizer: [
497 new TerserPlugin({
498 extractComments: {
499 condition: 'some',
500 filename: (file) => {
501 return `${file}.LICENSE`;
502 },
503 banner: (licenseFile) => {
504 return `License information can be found in ${licenseFile}`;
505 },
506 },
507 }),
508 ],
509 },
510};
511```
512
513##### `filename`
514
515Type: `String|Function<(string) -> String>`
516Default: `${file}.LICENSE`
517
518The file where the extracted comments will be stored.
519Default is to append the suffix `.LICENSE` to the original filename.
520
521**webpack.config.js**
522
523```js
524module.exports = {
525 optimization: {
526 minimizer: [
527 new TerserPlugin({
528 extractComments: {
529 condition: /^\**!|@preserve|@license|@cc_on/i,
530 filename: 'extracted-comments.js',
531 banner: (licenseFile) => {
532 return `License information can be found in ${licenseFile}`;
533 },
534 },
535 }),
536 ],
537 },
538};
539```
540
541##### `banner`
542
543Type: `Boolean|String|Function<(string) -> String>`
544Default: `/*! For license information please see ${commentsFile} */`
545
546The banner text that points to the extracted file and will be added on top of the original file.
547Can be `false` (no banner), a `String`, or a `Function<(string) -> String>` that will be called with the filename where extracted comments have been stored.
548Will be wrapped into comment.
549
550**webpack.config.js**
551
552```js
553module.exports = {
554 optimization: {
555 minimizer: [
556 new TerserPlugin({
557 extractComments: {
558 condition: true,
559 filename: (file) => {
560 return `${file}.LICENSE`;
561 },
562 banner: (commentsFile) => {
563 return `My custom banner about license information ${commentsFile}`;
564 },
565 },
566 }),
567 ],
568 },
569};
570```
571
572### `warningsFilter`
573
574Type: `Function<(warning, source) -> Boolean>`
575Default: `() => true`
576
577Allow to filter [terser](https://github.com/terser-js/terser) warnings.
578Return `true` to keep the warning, `false` otherwise.
579
580**webpack.config.js**
581
582```js
583module.exports = {
584 optimization: {
585 minimizer: [
586 new TerserPlugin({
587 warningsFilter: (warning, source) => {
588 if (/Dropping unreachable code/i.test(warning)) {
589 return true;
590 }
591
592 if (/filename\.js/i.test(source)) {
593 return true;
594 }
595
596 return false;
597 },
598 }),
599 ],
600 },
601};
602```
603
604## Examples
605
606### Cache And Parallel
607
608Enable cache and multi-process parallel running.
609
610**webpack.config.js**
611
612```js
613module.exports = {
614 optimization: {
615 minimizer: [
616 new TerserPlugin({
617 cache: true,
618 parallel: true,
619 }),
620 ],
621 },
622};
623```
624
625### Preserve Comments
626
627Extract all legal comments (i.e. `/^\**!|@preserve|@license|@cc_on/i`) and preserve `/@license/i` comments.
628
629**webpack.config.js**
630
631```js
632module.exports = {
633 optimization: {
634 minimizer: [
635 new TerserPlugin({
636 terserOptions: {
637 output: {
638 comments: /@license/i,
639 },
640 },
641 extractComments: true,
642 }),
643 ],
644 },
645};
646```
647
648### Remove Comments
649
650If you avoid building with comments, set **terserOptions.output.comments** to **false** as in this config:
651
652**webpack.config.js**
653
654```js
655module.exports = {
656 optimization: {
657 minimizer: [
658 new TerserPlugin({
659 terserOptions: {
660 output: {
661 comments: false,
662 },
663 },
664 }),
665 ],
666 },
667};
668```
669
670### Custom Minify Function
671
672Override default minify function - use `uglify-js` for minification.
673
674**webpack.config.js**
675
676```js
677module.exports = {
678 optimization: {
679 minimizer: [
680 new TerserPlugin({
681 // Uncomment lines below for cache invalidation correctly
682 // cache: true,
683 // cacheKeys: (defaultCacheKeys) => {
684 // delete defaultCacheKeys.terser;
685 //
686 // return Object.assign(
687 // {},
688 // defaultCacheKeys,
689 // { 'uglify-js': require('uglify-js/package.json').version },
690 // );
691 // },
692 minify: (file, sourceMap) => {
693 // https://github.com/mishoo/UglifyJS2#minify-options
694 const uglifyJsOptions = {
695 /* your `uglify-js` package options */
696 };
697
698 if (sourceMap) {
699 uglifyJsOptions.sourceMap = {
700 content: sourceMap,
701 };
702 }
703
704 return require('uglify-js').minify(file, uglifyJsOptions);
705 },
706 }),
707 ],
708 },
709};
710```
711
712## Contributing
713
714Please take a moment to read our contributing guidelines if you haven't yet done so.
715
716[CONTRIBUTING](./.github/CONTRIBUTING.md)
717
718## License
719
720[MIT](./LICENSE)
721
722[npm]: https://img.shields.io/npm/v/terser-webpack-plugin.svg
723[npm-url]: https://npmjs.com/package/terser-webpack-plugin
724[node]: https://img.shields.io/node/v/terser-webpack-plugin.svg
725[node-url]: https://nodejs.org
726[deps]: https://david-dm.org/webpack-contrib/terser-webpack-plugin.svg
727[deps-url]: https://david-dm.org/webpack-contrib/terser-webpack-plugin
728[tests]: https://img.shields.io/circleci/project/github/webpack-contrib/terser-webpack-plugin.svg
729[tests-url]: https://circleci.com/gh/webpack-contrib/terser-webpack-plugin
730[cover]: https://codecov.io/gh/webpack-contrib/terser-webpack-plugin/branch/master/graph/badge.svg
731[cover-url]: https://codecov.io/gh/webpack-contrib/terser-webpack-plugin
732[chat]: https://img.shields.io/badge/gitter-webpack%2Fwebpack-brightgreen.svg
733[chat-url]: https://gitter.im/webpack/webpack
734[size]: https://packagephobia.now.sh/badge?p=terser-webpack-plugin
735[size-url]: https://packagephobia.now.sh/result?p=terser-webpack-plugin