W3cubDocs

/webpack 2

UglifyjsWebpackPlugin

Install

With Yarn:

yarn add uglifyjs-webpack-plugin --dev

With npm:

npm install uglifyjs-webpack-plugin --save-dev

Important! The plugin has a peer dependency to uglify-js, so in order to use the plugin, also uglify-js has to be installed. The currently (2017/1/25) available uglify-js npm packages, however, do not support minification of ES6 code. In order to support ES6, an ES6-capable, a.k.a. harmony, version of UglifyJS has to be provided.

If your minification target is ES6:

yarn add git://github.com/mishoo/UglifyJS2#harmony --dev

If your minification target is ES5:

yarn add uglify-js --dev

Usage

const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  entry: {...},
  output: {...},
  module: {...},
  plugins: [
    new UglifyJSPlugin()
  ]
};

Options

This plugin supports UglifyJS features as discussed below:

Property
Type
Default
Description
Property
compress
Type
boolean, object
Default
true
Description
Property
mangle
Type
boolean, object
Default
true
Description
See below.
Property
beautify
Type
boolean
Default
false
Description
Beautify output.
Property
output
Type
An object providing options for UglifyJS OutputStream
Default
Description
Lower level access to UglifyJS output.
Property
comments
Type
boolean, RegExp, function(astNode, comment) -> boolean
Default
Defaults to preserving comments containing /*!, /**!, @preserve or @license.
Description
Comment related configuration.
Property
extractComments
Type
boolean, RegExp, function (astNode, comment) -> boolean, object
Default
false
Description
Whether comments shall be extracted to a separate file, see below.
Property
sourceMap
Type
boolean
Default
false
Description
Use SourceMaps to map error message locations to modules. This slows down the compilation. Important! cheap source map options don't work with the plugin!
Property
test
Type
RegExp, Array
Default
/.js($|\?)/i
Description
Test to match files against.
Property
include
Type
RegExp, Array
Default
Description
Test only include files.
Property
exclude
Type
RegExp, Array
Default
Description
Files to exclude from testing.

Mangling

mangle.props (boolean|object) - Passing true or an object enables and provides options for UglifyJS property mangling - see UglifyJS documentation for mangleProperties for options.

Note: the UglifyJS docs warn that you will probably break your source if you use property mangling, so if you aren’t sure why you’d need this feature, you most likely shouldn’t be using it! You can tweak the behavior as below:

new UglifyJsPlugin({
  mangle: {
    // Skip mangling these
    except: ['$super', '$', 'exports', 'require']
  }
})

Extracting Comments

The extractComments option can be

  • true: All comments that normally would be preserved by the comments option will be moved to a separate file. If the original file is named foo.js, then the comments will be stored to foo.js.LICENSE
  • regular expression (given as RegExp or string) or a function (astNode, comment) -> boolean: All comments that match the given expression (resp. are evaluated to true by the function) will be extracted to the separate file. The 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.
  • an object consisting of the following keys, all optional:
    • condition: regular expression or function (see previous point)
    • filename: The file where the extracted comments will be stored. Can be either a string or function (string) -> string which will be given the original filename. Default is to append the suffix .LICENSE to the original filename.
    • banner: The banner text that points to the extracted file and will be added on top of the original file. will be added to the original file. Can be false (no banner), a string, or a function (string) -> string that will be called with the filename where extracted comments have been stored. Will be wrapped into comment. Default: /*! For license information please see foo.js.LICENSE */

© 2012–2016 Tobias Koppers
Licensed under the Creative Commons Attribution License 4.0.
https://webpack.js.org/plugins/uglifyjs-webpack-plugin/