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.再次打包,成功了。

本文参考文章

相关推荐
SuperEugene2 分钟前
前端空值处理规范:Vue 实战避坑,可选链、?? 兜底写法|项目规范篇
前端·javascript·vue.js
前端百草阁3 分钟前
Vue3 Diff 算法详解
前端·javascript·vue.js·算法·前端框架
im_AMBER4 分钟前
前后端对接: ESM配置与React Router
前端·javascript·学习·react.js·性能优化·前端框架·ecmascript
学且思6 分钟前
使用import.meta.url实现传递路径动态加载资源
前端·javascript·vue.js
problc8 分钟前
OpenClaw 的前端用的React还是Vue?
前端·vue.js·react.js
冰暮流星11 分钟前
javascript里面的return语句讲解
开发语言·前端·javascript
步步为营DotNet15 分钟前
使用.NET 11的Native AOT提升应用性能
java·前端·.net
左耳咚18 分钟前
Claude Code 记忆系统与 CLAUDE.md
前端·人工智能·claude
喵叔哟19 分钟前
12-调用OpenAI-API
前端·人工智能·.net
m0_7066532319 分钟前
如何准确判断Mac电池寿命并决定更换时机
前端·html