Security News
NIST Misses 2024 Deadline to Clear NVD Backlog
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.
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.
This plugin uses UglifyJS to minify your JavaScript. It is the same plugin as in Webpack core (webpack.optimize.UglifyJSPlugin
) 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.
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!
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. |
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 */
MIT.
FAQs
UglifyJS plugin for webpack
The npm package uglifyjs-webpack-plugin receives a total of 473,662 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
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.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.