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

本文参考文章

相关推荐
Larcher23 分钟前
新手也能学会,100行代码玩AI LOGO
前端·llm·html
徐子颐35 分钟前
从 Vibe Coding 到 Agent Coding:Cursor 2.0 开启下一代 AI 开发范式
前端
小月鸭1 小时前
如何理解HTML语义化
前端·html
jump6801 小时前
url输入到网页展示会发生什么?
前端
诸葛韩信1 小时前
我们需要了解的Web Workers
前端
brzhang1 小时前
我觉得可以试试 TOON —— 一个为 LLM 而生的极致压缩数据格式
前端·后端·架构
yivifu2 小时前
JavaScript Selection API详解
java·前端·javascript
这儿有一堆花2 小时前
告别 Class 组件:拥抱 React Hooks 带来的函数式新范式
前端·javascript·react.js
十二春秋2 小时前
场景模拟:基础路由配置
前端
六月的可乐2 小时前
实战干货-Vue实现AI聊天助手全流程解析
前端·vue.js·ai编程