Webpack 4 - How to configure minimize?

JavascriptWebpackWebpack 4

Javascript Problem Overview


Webpack 4 comes with the following statement:

> Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.

Fair enough, but I cannot find any information about configuring the UglifyJsPlugin instance running under the hood, for example to change the cache directory. Can this be done?

Javascript Solutions


Solution 1 - Javascript

It's not possible to modify the default configuration.

You can use the optimization.minimizer setting to instantiate your own UglifyJsPlugin, however. Using 4.0 we used this example to get source maps even when mode is set to 'production' for example (no longer necessary as of 4.1.1):

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

module.exports = {
  optimization: {
    minimizer: [
      // we specify a custom UglifyJsPlugin here to get source maps in production
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        uglifyOptions: {
          compress: false,
          ecma: 6,
          mangle: true
        },
        sourceMap: true
      })
    ]
  }
};

Solution 2 - Javascript

Without adding uglifyjs-webpack-plugin, you can just add this to the end of your webpack.prod.config.js file:

 optimization: {
   minimize: false
 }

Solution 3 - Javascript

You can try this

npm install uglifyjs-webpack-plugin --save-dev

webpack.config.js

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

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

webpack documentation

Solution 4 - Javascript

Just run:

yarn add uglifyjs-webpack-plugin --dev

Reference: Alfonso Pérez answer

Solution 5 - Javascript

For those coming behind me, realized this misleading error was not related to my correct webpack config, but actually, the offline-plugin was out of date and causing this issue. It needed to be upgraded. See github issue: https://github.com/webpack-contrib/uglifyjs-webpack-plugin/issues/234#issuecomment-369134047

Solution 6 - Javascript

You should check p option: https://webpack.js.org/guides/production/#cli-alternatives : this flag tells Webpack to optimize your build for production environment. You can use it with the new "production" mode for a smaller build.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestioncsvanView Question on Stackoverflow
Solution 1 - JavascriptBeauView Answer on Stackoverflow
Solution 2 - JavascriptNafisView Answer on Stackoverflow
Solution 3 - JavascriptSarath AkView Answer on Stackoverflow
Solution 4 - JavascriptRafael Corrêa GomesView Answer on Stackoverflow
Solution 5 - JavascripthallmanitorView Answer on Stackoverflow
Solution 6 - JavascriptKorHosikView Answer on Stackoverflow