webpack3 使用ES6：ERROR in XX.js from UglifyJs

ERROR

ERROR in bundle.e65c521704a601f16148.js from UglifyJs
Unexpected token: name (extends) [bundle.e65c521704a601f16148.js:1,57374]
或者
ERROR in xx.js from UglifyJs
Invalid Assignment ..

原因分析

webpack3的uglify-js 版本太低，不支持ES6语法

解决：uglifyjs-webpack-plugin插件包支持ES6

//add import 
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
    
    
//in the plugins section
plugins: [
    new UglifyJsPlugin()
]

然而：加入了uglifyjs-webpack-plugin插件，理论上应该解决。实际上还是会失败。

因为 webpack -p 中的 -p 会隐含使用 webpack3 自带的 uglifyjs 0.4.6，这个版本不支持 ES6， 所以要设法去掉 -p 参数，使新的uglifyjs生效。

'-p' 参数有两个作用：

• 添加 UglifyJS plugin 到build process
• 设置 process.env.NODE_ENV = 'production'

实际上第一个作用，我们已经手动导入了，因此只需要在代码中设置 production 即可。在代码中手动设置为生产环境:

plugins: [
   new webpack.DefinePlugin({
    'process.env': {
        'NODE_ENV': JSON.stringify("production")
    }
})
 ]

然后在 webpack命令中去掉 -p， 大功告成。

参考：Using ES6 with Webpack 3 in production