在使用 Webpack 进行前端项目构建时，可能会遇到 ERROR in from UglifyJs Unexpected token 的错误。这个错误一般是由于 UglifyJs 压缩代码时出现了语法错误，导致构建失败。本文将介绍这个错误的原因和解决方法，并给出示例代码。
原因分析
UglifyJs 是一个 JavaScript 代码压缩工具，它可以将代码中的空格、注释、多余的代码等进行压缩，以减小文件大小。但是，如果代码中存在语法错误，UglifyJs 就无法正确地压缩代码，从而导致构建失败。
常见的导致语法错误的原因包括：
- 代码中缺少分号；
- 对象字面量中的属性名没有用引号括起来；
- 代码中使用了 ES6 的语法，但是 Webpack 配置中没有启用对应的 loader 等。
解决方法
针对不同的原因，可以采取不同的解决方法。
1. 添加分号
在 JavaScript 中，分号是可选的，但是如果不加分号，容易导致语法错误。因此，我们可以在代码的每一行结尾加上分号，以避免这个问题。示例代码如下：
----- - - -- ----- - - -- ------------- - ---
2. 使用引号括起属性名
在对象字面量中，属性名需要使用引号括起来，否则会导致语法错误。示例代码如下：
----- --- - - ------- -------- ------ -- -- ----------------------
3. 启用对应的 loader
如果代码中使用了 ES6 的语法，但是 Webpack 配置中没有启用对应的 loader，就会导致构建失败。例如，如果代码中使用了 import/export 语法，就需要使用 babel-loader 进行转换。示例代码如下：
------ - --- - ---- --------- ----- - - -- ----- - - -- ------------------ ----
在 Webpack 配置中，需要添加如下的 loader：
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- ---------------------
-
-
-
-
-总结
在使用 Webpack 进行前端项目构建时，出现 ERROR in from UglifyJs Unexpected token 错误，一般是由于 UglifyJs 压缩代码时出现了语法错误。针对不同的原因，可以采取不同的解决方法，如添加分号、使用引号括起属性名、启用对应的 loader 等。通过本文的介绍，相信读者可以更好地理解并解决这个问题。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66153303d10417a22256ecf0