Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
uglifyjs-webpack-plugin
Advanced tools
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.
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,
}),
],
},
};
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.
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.
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.
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.
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
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
entry: {...},
output: {...},
module: {...},
plugins: [
new UglifyJSPlugin()
]
};
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. |
extractComments | boolean, RegExp, function (astNode, comment) -> boolean, object | false | Whether comments shall be extracted to a separate file, see below. |
sourceMap | boolean | false | 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! |
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. |
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']
}
})
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
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.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 */
Juho Vepsäläinen |
Joshua Wiens |
Kees Kluskens |
Sean Larkin |
FAQs
UglifyJS plugin for webpack
The npm package uglifyjs-webpack-plugin receives a total of 515,312 weekly downloads. As such, uglifyjs-webpack-plugin popularity was classified as popular.
We found that uglifyjs-webpack-plugin demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 7 open source maintainers collaborating on the project.
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.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.