webpack 打包 UglifyJs 报错

本文解决Vue-cli项目使用UglifyJs压缩es6代码时出现的错误,介绍如何修改webpack.base.conf.js配置文件,以排除特定目录,确保代码正确压缩。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Vue-cli 打包报错:
ERROR in static/js/4.784ab4a1238de8e94312.js from UglifyJs
Unexpected token:

原因:Uglify模块不能压缩es6的代码
解决:修改webpack.base.conf.js 转换出错文件

    {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'),resolve('node_modules/browser-md5-file/dist')]
      }

  

转载于:https://www.cnblogs.com/rlann/p/11268970.html

### UglifyJS 打包报错解决方案 UglifyJS打包过程中出现错误的主要原因是其不支持 ES6 语法[^1]。例如,`const` 和 `let` 等现代 JavaScript 特性无法被 UglifyJS 正确解析,导致打包失败。此外,在某些情况下,错误信息可能并不明确,难以直接定位问题代码的位置[^2]。 为了解决这一问题,可以采取以下方法: #### 方法一:切换到支持 ES6 的压缩工具 由于 UglifyJS 不再维护,并且官方推荐使用 Terser 替代,因此可以将打包工具从 `uglifyjs-webpack-plugin` 替换为 `terser-webpack-plugin`。Terser 是一个支持 ES6+ 语法的 JavaScript 压缩工具,能够更好地兼容现代 JavaScript 特性[^1]。 安装 Terser: ```bash npm install terser-webpack-plugin --save-dev ``` 在 Webpack 配置中替换插件: ```javascript const TerserPlugin = require('terser-webpack-plugin'); module.exports = { optimization: { minimize: true, minimizer: [new TerserPlugin()], }, }; ``` #### 方法二:使用 Babel 转译 ES6 代码 如果项目中包含大量 ES6 代码,而暂时无法迁移到 Terser,可以通过 Babel 将 ES6 代码转译为 ES5,从而确保 UglifyJS 能够正常处理。这种方法需要修改 Webpack 配置文件[^3]。 安装依赖: ```bash npm install babel-loader @babel/core @babel/preset-env --save-dev ``` 配置 Webpack: ```javascript module.exports = { module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'], }, }, }, ], }, }; ``` #### 方法三:排除特定模块 如果仅是 `node_modules` 中的某些第三方库包含 ES6 代码,可以通过 Webpack 的 `exclude` 配置项跳过这些模块的压缩。需要注意的是,这种方式可能会增加最终生成文件的体积。 配置示例: ```javascript const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); module.exports = { optimization: { minimizer: [ new UglifyJsPlugin({ include: /\.min\.js$/, // 仅压缩已标记为 min 的文件 uglifyOptions: { compress: { warnings: false, }, }, }), ], }, }; ``` 通过上述方法之一,可以有效解决 UglifyJS 打包时的错误问题。推荐优先考虑使用 Terser,因为它是更现代化的解决方案,能够更好地支持 ES6 及更高版本的语法。 ### 注意事项 - 如果项目中同时存在 ES5 和 ES6 代码,建议统一使用 Babel 进行转译,以避免潜在的兼容性问题。 - 在切换工具或调整配置后,务必重新测试打包流程,确保生成的文件功能正常。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值