使用UglifyJS插件进行Webpack优化会导致运行时错误

Question

I have an isomorphic React application that is bundled via webpack.

I have 2 entry points corresponding to 2 bundled file outputs: vendors.js and app.js .

When running the webpack-dev-server or when compiling without any optimization flags, everything works fine. However, as soon as I try to use the Uglify plugin, the compiled output contains errors.

I have tried:

webpack -p
webpack -optimize-minimize

or in the config:

new webpack.optimize.UglifyJsPlugin({sourceMap:false})

But all result in the same runtime error (undefined variables).

Is there anything obvious that could be causing this? Is Uglify being over-zealous and removing something it shouldn't?

Answer 1

The problem was being caused by the Uglify mangler. Without knowing which variable rename was causing the problem, the solution was to turn off mangling entirely:

new webpack.optimize.UglifyJsPlugin({
  sourceMap: false,
  mangle: false
})

This should be added as a Webpack Plugin to your config file, eg:

var config = {

  //... various config settings

  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: false,
      mangle: false
    })
  ]
};

Answer 2

For those who deactivated mangle and still have the issue, check if you build with -p parameter. It appears -p also mangle the output, and in my case, I had to switch UflifyJsPlugin mangle to false and build without the -p flag to get it to work (at the cost of an increase of the weight of the js of around 50%)

Answer 3

I fixed this by using the following (I'm using Webpack 4.5):

var config = {
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        uglifyOptions: {
          safari10: true,
          mangle: {
            safari10: true,
          }
        }
      })
    ]
  }
};

From https://github.com/mishoo/UglifyJS2/tree/harmony#mangle-options :

safari10 (default false) -- Pass true to work around the Safari 10 loop iterator bug "Cannot declare a let variable twice". See also: the safari10 output option.

Also note that this goes in optimization.minimizer . It didn't work for me when I put it in plugins .