在使用 Webpack 进行前端项目打包时，有时候会出现 “Invalid or unexpected token” 的错误提示，这种错误通常与代码中出现了一些无法被识别或编译的字符或符号有关。这篇文章将详细介绍这种问题的原因和解决方案，并提供实际的示例代码，以便读者更好地理解和学习。
原因分析
Webpack 的打包机制是将多个文件打包成一个或多个 bundle 文件，这些文件通常是通过 Node.js 模块加载的。在打包的过程中，Webpack 把源代码解析成抽象语法树（AST），然后进行各种处理（例如转化 ES6 代码、处理 CSS 文件、压缩代码等），最后生成打包后的文件。但是在解析源代码的过程中，Webpack 有时会遇到一些语法错误，这些错误通常是由于代码中存在某些非法字符或符号导致的。
造成此类错误的原因可能有很多，下面是一些常见的例子：
1. 使用了不支持的语法
在不同版本的 ECMAScript 中，可能存在一些语言特性的差异，一些较老的版本可能不支持较新的语法。例如使用 let 或 const 关键字定义变量需要 ECMAScript 6 或以上版本的支持。如果你的 Webpack 配置未使用对应的 Babel 转换插件，就可能出现非法字符或符号的错误。
2. 语法错误
代码中存在语法错误也可能导致出现此类错误，比如缺少结束符号，缺少括号等等。
3. 文件编码问题
代码文件的编码格式也可能导致此类错误，需要确认文件编码是否正确（默认是 UTF-8）。
解决方案
在遇到此类错误时，可以采取以下措施来解决：
1. 检查代码
首先需要对代码进行排查，检查是否有语法错误或不支持的语法，确保代码不会在解析时出现错误。
2. 确认文件编码
检查文件的编码格式，确认是否使用了正确的编码格式。
3. 添加对应的 Babel 转换插件
如果出现不支持的语法，需要在 Webpack 配置中添加对应的 Babel 转换插件来支持这些语法。例如使用 const 和 let 关键字，需要添加 babel-plugin-transform-block-scoping 插件。
下面是一段示例代码，演示如何在 Webpack 配置中添加 Babel 插件：
-- -------------------- ---- -------
-------------- - -
------ -----------
------- -
--------- -----------
--
------- -
------ -
-
----- --------
-------- -----------------
---- -
------- ---------------
-------- -
-------- ----------------------
-------- ----------------------------------------
-
-
-
-
-
-4. 使用较新的 ECMAScript 标准
如果只是因为使用了较新的语法而导致此类错误，可以考虑改用较老的语法或者是升级使用的 ECMAScript 版本来解决。
总结
Webpack 打包后出现 “Invalid or unexpected token” 的问题通常源于代码中存在不支持的语法或语法错误，也可能是文件编码格式导致的。解决方案主要包括检查代码、确认文件编码、添加对应的 Babel 插件或是使用较新的 ECMAScript 标准。在排查问题时，建议使用 Chrome 开发工具进行调试，以便更快地定位问题。以上是本文的一些总结和建议，希望能对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6460b176968c7c53b0254f09