The uglifyjs-webpack-plugin is a plugin for Webpack that uses UglifyJS to minify JavaScript files. It helps in reducing the size of JavaScript files by removing unnecessary characters, comments, and whitespace, and by optimizing the code.

What are uglifyjs-webpack-plugin's main functionalities?

Basic Minification

This feature allows you to perform basic minification of JavaScript files using UglifyJS. The code sample demonstrates how to configure the plugin in a Webpack configuration file to minimize the output JavaScript files.

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

module.exports = {
  optimization: {
    minimizer: [new UglifyJsPlugin()]
  }
};

Custom UglifyJS Options

This feature allows you to customize the UglifyJS options. The code sample shows how to configure the plugin to remove console statements from the output JavaScript files.

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

module.exports = {
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        uglifyOptions: {
          compress: {
            drop_console: true,
          },
        },
      }),
    ],
  },
};

Source Map Support

This feature enables source map support, which helps in debugging minified code. The code sample demonstrates how to configure the plugin to generate source maps for the minified JavaScript files.

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

module.exports = {
  devtool: 'source-map',
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        sourceMap: true,
      }),
    ],
  },
};

Other packages similar to uglifyjs-webpack-plugin

Readme

Source

UglifyJS Webpack Plugin

This plugin uses UglifyJS to minify your JavaScript. It is the same plugin as in Webpack core except it has been decoupled from it. This allows you to control the version of UglifyJS you are using.

Note that webpack contains the same plugin under webpack.optimize.UglifyJsPlugin. This is a standalone version for those that want to control the version of UglifyJS. The documentation is valid apart from the installation instructions in that case.

Usage

First, install the plugin:

yarn add uglifyjs-webpack-plugin --dev

..or if you insist on using npm instead of the more advanced Yarn:

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

Then configure as follows:

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

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

And, that's it!

Options

This plugin supports UglifyJS features as discussed below:

Property	Type	Default	Description
compress	boolean, object	true	See UglifyJS documentation.
mangle	boolean, object	true	See below.
beautify	boolean	false	Beautify output.
output	An object providing options for UglifyJS OutputStream		Lower level access to UglifyJS output.
comments	boolean, RegExp, function(astNode, comment) -> boolean	Defaults to preserving comments containing `/!`, `/*!`, `@preserve` or `@license`.	Comment related configuration.
sourceMap	boolean	false	Use SourceMaps to map error message locations to modules. This slows down the compilation.
test	RegExp, Array	`/.js($\|?)/i`	Test to match files against.
include	RegExp, Array		Test only `include` files.
exclude	RegExp, Array		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 webpack.optimize.UglifyJsPlugin({
  mangle: {
    // Skip mangling these
    except: ['$super', '$', 'exports', 'require']
  }
})

License

MIT.

Keywords

FAQs

What is uglifyjs-webpack-plugin?

Is uglifyjs-webpack-plugin popular?

Is uglifyjs-webpack-plugin well maintained?

Last updated on 02 Feb 2017

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install