Webpack 5 comes with terser-webpack-plugin out of the box, hence you can just import it and configure as you wish.
Webpack 5 comes with terser-webpack-plugin out of the box, hence you can just import it and configure as you wish.
As Sam said, Webpack 5 comes with the Terser plugin which does what UglifyJS used to do. Here's an example on how to use the Terser plugin for webpack.
// webpack.config.js
const TerserPlugin = require("terser-webpack-plugin");
const config = {
...
optimization: {
minimize: true,
minimizer: [
new TerserPlugin(),
],
}
};
Not sure if you're still looking for an answer to this, but now you can include the beta version of uglifyjs-webpack-plugin as a webpack plugin and it'll use uglify-es which can minify ES6 code.
npm install uglifyjs-webpack-plugin
and then in your webpack.config.js:
const Uglify = require("uglifyjs-webpack-plugin");
module.exports = {
entry: ...,
output: ...,
plugins: [
new Uglify()
]
};
Just came to know that uglifyjs-webpack-plugin also doesn't minify ES6 code anymore. They started doing so in some versions, but then uglify-es they used is no more maintained so they fell back to uglify-js which doesn't support ES6 minification. Full Details here
If you want to minify ES6 code, please take a look at terser-webpack-plugin
terser is a fork of uglify-es that retains API and CLI compatibility with uglify-es and uglify-js@3.
Install the plugin with NPM via:
npm install terser-webpack-plugin --save-dev
or with yarn:
yarn add -D terser-webpack-plugin
Then, add the plugin in the in the optimization section of your webpack config:
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
//...
optimization: {
minimizer: [new TerserPlugin()]
}
};