Webpack 打包后出现 Uncaught SyntaxError: Unexpected token < 错误的解决方法
在使用 Webpack 打包前端项目时，有时会遇到浏览器控制台输出 Uncaught SyntaxError: Unexpected token < 的错误。这个错误的意思是说浏览器在解析代码时遇到了一个意外的 < 符号，而这个符号通常出现在 HTML 代码中，而非 JavaScript 代码中。因此，我们需要找出错误的根源，然后采取相应的解决方法来排除这个错误。
错误原因
通常情况下，遇到这个错误的原因是因为 Webpack 将所有的代码打包成了一个 JavaScript 文件，然后在浏览器中直接执行这个文件。但是同时，我们的项目中可能包含了一些非 JavaScript 的文件，例如 HTML、CSS、图片等。这些文件在被打包时也会被包含在 JavaScript 文件中，但是浏览器在执行 JavaScript 代码时，往往会优先解析 HTML 代码。而一旦浏览器遇到了一个 < 符号，就会认为它是 HTML 代码的开始标签，而不是 JavaScript 代码的一部分。于是就会产生上述的错误。
解决方法
- 手动引入外部库
一种解决方法是在 HTML 文件中手动引入外部库，例如 jQuery 等。这种做法可以避免将不相关的代码打包到 JavaScript 文件中，从而减小 JavaScript 文件的大小，并提高浏览器的解析速度。
// javascriptcn.com 代码示例
<!-- index.html -->
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>My App</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<!-- Your HTML here -->
<script src="bundle.js"></script>
</body>
</html>- 使用 webpack-html-plugin 插件
另一种解决方法是使用 webpack-html-plugin 插件，将 HTML 文件和 JavaScript 文件分离，从而避免将 HTML 代码打包到 JavaScript 文件中。这个插件会自动在 HTML 文件中插入 script 标签，引入打包后的 JavaScript 文件。
首先，安装插件：
npm install --save-dev html-webpack-plugin
然后，在 webpack.config.js 文件中添加以下代码：
// javascriptcn.com 代码示例
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// ...
plugins: [
new HtmlWebpackPlugin({
template: 'src/index.html'
})
]
// ...
};其中，template 选项指定了 HTML 模板文件的路径。
最后，在 HTML 文件中，不要包含任何 JavaScript 的代码，而是自动引用打包后的 JavaScript 文件：
// javascriptcn.com 代码示例
<!-- index.html -->
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>My App</title>
</head>
<body>
<!-- Your HTML here -->
<script src="bundle.js"></script>
</body>
</html>总结
使用 Webpack 打包前端项目时，我们需要注意避免将 HTML 代码打包到 JavaScript 文件中，而应该采取相应的解决方法来分离 HTML 和 JavaScript 代码。这样能够提高浏览器的解析速度，并避免出现 Uncaught SyntaxError: Unexpected token < 错误。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6549de937d4982a6eb4148c1