webpack打包报错UglifyJs Unexpected token: punc (,)

项目当dev命令运行时能正常运行,打包后却报错UglifyJs Unexpected token: punc (,),

javascript 复制代码
> yarn build
 
Creating an optimized production build...
Failed to compile.
 
Failed to minify the bundle. Error: static/js/main.js from UglifyJs
Unexpected token: punc (,) [static/js/main.js:11913,13]
    at /Users/busyRobot/workSpace/B/A/scripts/build.js:120:23
    at /Users/busyRobot/workSpace/B/A/node_modules/webpack/lib/Compiler.js:269:13
    at Compiler.emitRecords (/Users/busyRobot/workSpace/B/A/node_modules/webpack/lib/Compiler.js:375:38)
    at /Users/busyRobot/workSpace/B/A/node_modules/webpack/lib/Compiler.js:262:10
    at /Users/busyRobot/workSpace/B/A/node_modules/webpack/lib/Compiler.js:368:12
    at next (/Users/busyRobot/workSpace/B/A/node_modules/tapable/lib/Tapable.js:218:11)
    at Compiler.<anonymous> (/Users/busyRobot/workSpace/B/A/node_modules/webpack/lib/performance/SizeLimitsPlugin.js:99:4)
    at next (/Users/busyRobot/workSpace/B/A/node_modules/tapable/lib/Tapable.js:220:14)
    at /Users/busyRobot/workSpace/B/A/node_modules/sw-precache-webpack-plugin/lib/index.js:98:18
Read more here: http://bit.ly/2tRViJ9

但是能顺利打出来,看一下原webpack.prod.conf.js:

JavaScript 复制代码
 plugins: [
...
   new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      },
      sourceMap: config.build.productionSourceMap,
      parallel: true
    }),
]

经过一番思考后对比其他项目打算换一个压缩插件uglifyjs-webpack-plugin,而不使用webpack内置插件,结果就解决了!

1.在package.json中添加如下插件依赖
"uglifyjs-webpack-plugin": "^1.1.1"

2.修改文件webpack.prod.conf.js, 替换webpack的压缩插件

JavaScript 复制代码
//文件开始处添加如下
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
//插件配置处添加如下
 plugins: [
...
    new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          warnings: false,
          drop_debugger: true, 
          drop_console: true 
        }
      },
      sourceMap: config.build.productionSourceMap,
      parallel: true
    }),
...
]

注意把之前的webpack配置的压缩插件注释了。

3.再次打包,成功了。

本文参考文章

相关推荐
烂蜻蜓1 小时前
深入理解 HTML 元素:构建网页的基础
开发语言·前端·css·html·html5
第七玩家3 小时前
React-异步队列执行方法useSyncQueue
前端·javascript·react.js
少年姜太公3 小时前
让你快速拿捏大厂面试中关于eventloop执行顺序问题
前端·javascript·面试
m0_748238277 小时前
Nginx解决前端跨域问题
运维·前端·nginx
轻口味7 小时前
【每日学点HarmonyOS Next知识】截图组件截取列表、Toggle组件、Web组件请求头、列表选择弹窗、游戏加速
前端·游戏·harmonyos·harmonyosnext
NoneCoder7 小时前
工程化与框架系列(22)--前端性能优化(中)
前端·性能优化·状态模式
qq_533183027 小时前
关于父组件向子组件传值的形式(类型一)
前端·javascript·vue.js
糖朝7 小时前
VUE3开发-9、axios前后端跨域问题解决方案
前端·javascript·vue.js
m0_694845577 小时前
使用服务器搭建无门槛ChatGPT WEB应用LobeChat
linux·运维·服务器·前端·网络·chatgpt
明耀7 小时前
uniapp或者vue 使用serialport
前端·vue.js·uni-app