Webpack optimize with UglifyJS plugin causes runtime error

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?

Solution 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
    })
  ]
};

Solution 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%)

Comments

[Admin]

I'm up-voting the answer but it would be nicer if we could see this as part of the webpack JSON config file that you're using. I wasn't sure where to place this in the my own config file to get it working.

[duncanhall]

Thanks, I've added an example of including the plugin in a config file.

[Amit Kumar Gupta]

For me it says webpack is not defined. If I define it as var webpack = require('webpack'); in webpack configuration then it says "Cannot find module 'webpack'". Do I need to install something?

[duncanhall]

This is a separate issue - try creating a new post for your question.

[Vladislav Rastrusny]

I have the same problem, but turning off mangling somehow doesn't help

[Max]

@AmitGupta If you installed webpack using -g and are running webpack via the command line, then you also must install webpack locally via npm install --save-dev webpack in order to require it inside the webpack configuration file.

[user911]

I have the same issue.Turning off mangling didn't help me either. How to debug this further? any ideas?

[duncanhall]

@user911 If this problem/solution does not match your specific experience, please post a separate question.

[Ozymandias]

Turning off the mangler is defeating the point of the uglifier. This is not a true solution.

[Design by Adrian]

as @AjaxLeung said, turning off mangling makes Uglify fairly pointless. Have you tried turning off mangling of just a subset of objects, like exports? See Uglify docs: github.com/webpack-contrib/uglifyjs-webpack-plugin#mangling

[duncanhall]

Uglify does a vast range of things, of which mangling accounts for a small percentage of compression gains. Incrementally disabling mangling for different groups may well help find a specific issue, but it's not true to say that turning off mangling entirely makes Uglify "fairly pointless".