在前端开发中，Webpack 是非常常用的一个打包工具，它可以将多个 JavaScript 文件打包成一个文件，从而减少页面加载时间，提高页面性能。但是，在使用 Webpack 进行打包时，有时会遇到 ERROR in app.js from UglifyJs Unexpected token punc «(», expected punc 这样的错误提示，这是因为在打包过程中，UglifyJs 遇到了无法识别的语法，导致打包失败。本文将详细介绍这个错误的原因和解决方法。
错误原因
这个错误的原因是因为 UglifyJs 无法识别一些语法，比如箭头函数、模板字符串、let 和 const 等 ES6 语法，如果在代码中使用了这些语法，就会导致打包失败。例如：
const arr = [1, 2, 3];
const newArr = arr.map(item => item * 2);
console.log(`newArr: ${newArr}`);在这个例子中，使用了箭头函数和模板字符串，如果使用 Webpack 进行打包，就会出现上述错误提示。
解决方法
解决这个问题有两种方法。
方法一：使用 Babel 编译
Babel 是一个 JavaScript 编译器，它可以将 ES6 语法转换成 ES5 语法，从而让 UglifyJs 能够识别。在使用 Webpack 进行打包时，可以使用 Babel 进行编译，将 ES6 语法转换成 ES5 语法，然后再进行打包。具体步骤如下：
- 安装 Babel 相关的依赖库：
npm install --save-dev babel-core babel-loader babel-preset-env
- 在 Webpack 配置文件中添加 Babel 相关的配置：
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- -------
-
-
-
-
-
--在这个配置中，使用了 babel-loader 来进行编译，exclude 属性表示排除 node_modules 目录下的文件，options 属性中的 presets 表示使用 Babel 的 env 预设，将 ES6 语法转换成 ES5 语法。
- 重新打包代码，问题解决。
方法二：修改 Webpack 配置
另外一种解决方法是修改 Webpack 配置，让 UglifyJs 支持 ES6 语法。具体步骤如下：
- 安装 uglifyjs-webpack-plugin 插件：
npm install --save-dev uglifyjs-webpack-plugin
- 在 Webpack 配置文件中添加该插件：
-- -------------------- ---- -------
----- -------------- - -----------------------------------
-------------- - -
-- ---
-------- -
--- ----------------
-------------- -
----- -
-
--
-
--在这个配置中，使用了 uglifyjs-webpack-plugin 插件，并设置了 ecma 选项为 6，表示支持 ES6 语法。
- 重新打包代码，问题解决。
总结
在使用 Webpack 进行打包时，遇到 ERROR in app.js from UglifyJs Unexpected token punc «(», expected punc 这样的错误提示，通常是因为 UglifyJs 无法识别 ES6 语法，导致打包失败。解决这个问题有两种方法，一种是使用 Babel 进行编译，将 ES6 语法转换成 ES5 语法，另一种是修改 Webpack 配置，让 UglifyJs 支持 ES6 语法。无论采用哪种方法，都可以解决这个问题，让代码顺利打包。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66121f6cd10417a2222b825b