123

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?

Penny Liu
  • 15,447
  • 5
  • 79
  • 98
csvan
  • 8,782
  • 12
  • 48
  • 91
  • 3
    For reference, the `UglifyJsPlugin` defaults are listed [here](https://github.com/webpack-contrib/uglifyjs-webpack-plugin#options) – davnicwil Aug 28 '18 at 07:19

6 Answers6

103

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
      })
    ]
  }
};
Beau
  • 11,267
  • 8
  • 44
  • 37
  • 109
    Wasn't webpack 4 supposed to be zero conf? – connexo Mar 01 '18 at 22:34
  • 3
    This requires me to instantiate the plugin though, I just want to modify existing configuration. – csvan Mar 01 '18 at 22:40
  • 1
    @csvan not possible to configure it, have to instantiate your own to specify a custom configuration – Beau Mar 01 '18 at 22:43
  • 1
    @connexo I think the example shown above will be unneeded at some point and that the goal is still zero conf but it's not quite there yet! for reference re: this specific example: https://github.com/webpack/webpack/issues/6614 – Beau Mar 01 '18 at 22:44
  • 1
    I did what you said and I got an Error: ```ReferenceError: UglifyJsPlugin is not defined``` – Pierre Trollé Apr 07 '18 at 17:17
  • 1
    @PierreTrollé sorry; I've just added the `require` line to the example :) – Beau Apr 09 '18 at 17:28
  • 5
    And keep in mind you might need to do `yarn add uglifyjs-webpack-plugin --dev` ;) – Alfonso Embid-Desmet Apr 09 '18 at 20:27
  • 1
    @Karolis correct, as far as I know the docs are not up to date for Webpack 4.x... this information come from a GitHub issue. – Beau Apr 10 '18 at 23:34
  • 2
    and here; search for "optimization.minimizer" on this page: https://medium.com/webpack/webpack-4-mode-and-optimization-5423a6bc597a – Beau Apr 10 '18 at 23:36
  • 1
    one of the GH issues that document this: https://github.com/webpack/webpack/issues/6879 – Beau Apr 10 '18 at 23:41
  • 3
    @AlfonsoPérez webpack already installs `uglifyjs-webpack-plugin` as a dependency – Beau Apr 12 '18 at 00:40
  • I am having this same issue. Just updated from Webpack 3 to 4. When i try to build, it starts but fails at the webpack with the error stated above. I have tried the solution above to no avail. Doesn't fix it, and doesn't give me a different error. Where should this be implemented? – Lazerbrains Jan 17 '20 at 23:29
8

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

 optimization: {
   minimize: false
 }
Nafis
  • 1,020
  • 17
  • 36
  • 3
    does this answer the question? OP is asking how to configure the plugin, not disable it? – Mr5o1 Sep 18 '20 at 03:14
  • 2
    @Mr5o1 stackoverflow is a public community and the OP is not the only person looking at the answers. Google landed me here because the question was related to my search and this answer is a perfectly valid one which helped me resolve my concern. And I'm not the only one like that. I don't really get those types of comments. – vir us Jan 01 '22 at 16:20
2

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

Sarath Ak
  • 7,903
  • 2
  • 47
  • 48
1

Just run:

yarn add uglifyjs-webpack-plugin --dev

Reference: Alfonso Pérez answer

Rafael Corrêa Gomes
  • 1,751
  • 1
  • 22
  • 31
1

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

hallmanitor
  • 318
  • 1
  • 4
  • 9
-4

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.

KorHosik
  • 1,225
  • 4
  • 14
  • 24