使用 Webpack 构建 JavaScript 代码时，有时候会遇到 "Invalid or unexpected token" 错误。这种错误通常表示某个文件中存在不符合 JavaScript 语法规范的代码，导致 Webpack 无法正确解析这个文件。本文将探讨这种错误的常见原因和解决方法。
常见原因
语法错误
最常见的原因就是在 JavaScript 代码中存在语法错误，例如：
----- --- - - ---- ---- -- -------- --
这段代码虽然看似正确，但是它末尾多了一个逗号。这种错误在浏览器中可能不会被检测出来，但是在 Webpack 编译的时候会导致 "Invalid or unexpected token" 错误。
非 JavaScript 代码
Webpack 可以处理多种类型的文件，但是它默认并不支持非 JavaScript 类型的文件。如果你在代码中引入了一个非 JavaScript 类型的文件，并且没有配置正确的 loader，就会导致 Webpack 报错。例如：
------ ----- ---- --------------
这段代码中引入了一个 CSS 文件，但是默认情况下 Webpack 并不能正确识别它。
编码问题
如果你的代码中存在非 ASCII 字符，而且文件编码格式与实际不一致，也会导致 Webpack 报错。例如：
----- -- - --------
如果这个文件的编码格式是 UTF-8，但是却在文件头部声明为 ISO-8859-1，这个文件就会导致 Webpack 报错。
解决方法
检查语法错误
最简单的解决方法就是检查代码中是否存在语法错误。你可以使用 ESLint、JSHint 等代码检查工具来检查语法错误。另外，一些编辑器也可以在代码编辑的过程中实时检查语法错误。
配置正确的 loader
如果你想在 JavaScript 中引入非 JavaScript 类型的文件，需要配置对应的 loader。例如，在 Webpack 中引入 CSS 文件，你需要安装 css-loader 和 style-loader 并进行配置：
-- -----------------
-------------- - -
-- ---
------- -
------ -
-
----- ---------
---- ---------------- --------------
--
--
--
--处理编码问题
如果你的代码存在编码问题，需要检查代码文件的编码格式是否与声明的一致。你可以使用一些文本编辑器来检查并转换代码文件的编码格式。在 Mac 上，你可以使用 iconv 命令来转换文件编码格式：
----- -- ---------- -- ----- -------- - ---------
总结
"Invalid or unexpected token" 错误通常是因为 JavaScript 代码存在语法错误或者引入了非 JavaScript 类型的文件，并且没有配置对应的 loader。如果你遇到这种错误，需要检查代码中是否存在语法错误，是否配置了正确的 loader。另外，也需要注意文件编码格式是否正确。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64ed7db3f6b2d6eab37a4c62