uglifyjs-webpack-plugin

What is uglifyjs-webpack-plugin?

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

terser-webpack-plugin

The terser-webpack-plugin is a Webpack plugin that uses Terser to minify JavaScript files. Terser is a fork of UglifyJS with better support for ES6+ syntax. It is often preferred over uglifyjs-webpack-plugin for modern JavaScript projects due to its better handling of newer JavaScript features.

babel-minify-webpack-plugin

The babel-minify-webpack-plugin is a Webpack plugin that uses Babel Minify (babel-minify) to minify JavaScript files. It is designed to work seamlessly with Babel and offers a wide range of minification options. It is a good alternative to uglifyjs-webpack-plugin, especially if you are already using Babel in your project.

closure-webpack-plugin

The closure-webpack-plugin is a Webpack plugin that uses Google Closure Compiler to minify JavaScript files. It offers advanced optimizations and is capable of performing aggressive code transformations. It is suitable for large projects that require high levels of optimization and code analysis.

README

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`
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.