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

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容