在使用 Webpack 打包前端项目时，有时会遇到报错信息：Unexpected token <。这个错误信息通常出现在浏览器控制台或者 Node.js 命令行中，表示在打包过程中遇到了一个语法错误，而这个错误通常是由于 Webpack 打包了 HTML 或者其他非 JavaScript 文件造成的。
问题分析
当 Webpack 打包项目时，会根据配置文件中的入口文件来分析依赖关系，并将所有的 JavaScript 文件打包成一个或多个 bundle 文件。在这个过程中，Webpack 会解析 JavaScript 文件中的语法，但是如果其中包含了 HTML 或者其他非 JavaScript 的文件，Webpack 就会默认将它们当成 JavaScript 文件来解析，因此就会出现语法错误，导致报错信息：Unexpected token <。
解决方案
方案一：使用 html-webpack-plugin 插件
html-webpack-plugin 是一个可以将 HTML 文件作为入口文件来打包的插件，它会自动将 HTML 文件中的 script 标签引用的 JavaScript 文件打包进 bundle 中。使用这个插件可以避免将 HTML 文件当成 JavaScript 文件来解析，从而解决 Unexpected token < 的问题。
安装 html-webpack-plugin：
npm install html-webpack-plugin --save-dev
在 webpack.config.js 中添加以下配置：
-- -------------------- ---- -------
----- ----------------- - -------------------------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- --------- - -------
--
-------- -
--- -------------------
--------- ------------------
--
-
--这样就可以将 src/index.html 文件作为入口文件来打包，同时将其中引用的 JavaScript 文件打包进 bundle 中。
方案二：使用 file-loader 或者 url-loader
如果项目中有其他非 JavaScript 的文件，例如图片、样式等，也会出现 Unexpected token < 的错误。这时可以使用 file-loader 或者 url-loader 来解决这个问题。
安装 file-loader 或者 url-loader：
npm install file-loader --save-dev # 或者 npm install url-loader --save-dev
在 webpack.config.js 中添加以下配置：
-- -------------------- ---- -------
-------------- - -
------ -----------------
------- -
--------- ------------
----- --------- - -------
--
------- -
------ -
-
----- -------------------
---- -
-
------- --------------
-------- -
----- ---------------
----------- ---------
-
-
-
-
-
-
--这样就可以将图片等非 JavaScript 文件打包进 bundle 中，避免了将它们当成 JavaScript 文件来解析的错误。
总结
在使用 Webpack 打包前端项目时，遇到 Unexpected token < 的错误通常是由于将 HTML 或者其他非 JavaScript 文件当成 JavaScript 文件来解析造成的。解决这个问题的方法有两种：一种是使用 html-webpack-plugin 插件将 HTML 文件作为入口文件来打包，另一种是使用 file-loader 或者 url-loader 将非 JavaScript 文件打包进 bundle 中。在实际项目中，可以根据具体情况选择不同的解决方案来解决这个问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65f166642b3ccec22fa1d1af