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

96
郝开心信札
0.1 2018.07.06 17:38 字数 206

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

No Error