解决 Webpack 打包过程中遇到 Unexpected token < 错误-JavaScript中文网-JavaScript教程资源分享门户

在使用 Webpack 进行前端工程化开发的过程中，有时候会遇到一个比较常见的错误：Unexpected token <。这个错误的出现通常是因为在打包过程中，Webpack 识别不出 HTML 文件里的语言，导致后续的操作不能继续执行。本文将详细解释这个错误的出现原因，并提供解决方法和示例代码，供大家参考和学习。

出现错误的原因

最常见的情况是在使用 Webpack 打包的过程中，我们会将 HTML 文件作为入口文件之一配置到 Webpack 中，如下所示：

module.exports = {
  entry: {
    app: './src/main.js',
    index: './src/index.html'
  },
  ...
}

然后使用 html-loader 将 HTML 文件转化成 JS 字符串，在打包的过程中，Webpack 会将这个 JS 字符串执行一遍并返回结果。但是有时候，当在 HTML 文件中使用了像以下内容的标签时：

<script type="text/javascript" src="..."></script>
<link rel="stylesheet" href="...">

Webpack 无法识别这些标签，并把它们当作是 JavaScript 代码进行解析，从而导致语法错误。

更进一步的，HTML 加载了 JavaScript 文件，而 JavaScript 里又可能包含有解析错误导致的错误符号 > 或 <。例如：

console.log('<img src="..."/>') // 报错

此时，这些错误符号又会被当做 HTML 标签，从而出现 Unexpected token < 错误。

解决方法

为了解决这个错误，我们可以使用一个插件：html-webpack-plugin。它能够在打包完成后，自动将 HTML 文件以及其他静态文件插入到最终的打包文件中，而不是将 HTML 文件作为入口文件之一。

这个插件的使用非常简单，只需要在 Webpack 配置文件中添加以下代码即可：

// www.javascriptcn.com code example
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  ...,
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ]
}

这样，Webpack 在打包完成后，就会将指定的 HTML 文件插入到最终的文件中，避免了出现 Unexpected token < 错误。如果还需要将其他静态文件插入到最终打包文件中，可以参考文档中的说明进行配置。其他 html-loader 插件及其它依赖的排错方式，和及时升级和查看文档，也是进一步排错的道路。

示例代码

在本示例中，我们使用 Vue.js 的脚手架工具 Vue CLI 4 创建一个简单的项目，然后添加限制 js 文件包括 .vue 文件，然后在 HTML 文件中嵌入 JavaScript 代码，并使用 html-loader 等转化工具来打包。

安装 Vue CLI

npm install -g @vue/cli

新建一个项目

vue create my-project

配置 vue.config.js

添加以下内容：

// www.javascriptcn.com code example
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('js')
      .exclude.add(/\.vue$/)
      .end()

    config.module
      .rule('vue')
      .test(/\.vue$/)
      .use('vue-loader')
      .loader('vue-loader')
  }
}

其中，我们使用了 chainWebpack 对 Webpack 配置进行扩展并排除了对 .vue 文件的验证。

在 App.vue 中添加 JavaScript 代码

// www.javascriptcn.com code example
<template>
  <div class="home">
    <h2>Hello! Vue CLI + Webpack + html-loader</h2>
  </div>
</template>

<script>
console.log('<img src="..."/>')
</script>

注意，在这里我们使用了一个包含错误符号的 JavaScript 代码。

打包项目

npm run build

在终端中可以看到错误如下：

// www.javascriptcn.com code example
ERROR in ./src/App.vue 3:14
Module parse failed: Unexpected token < in HTML (...llowfullscreen></iframe>
    <script type="text/ja) 1:7
You may need an appropriate loader to handle this file type.
| <template>
|   <div class="home">
|     <h2>Hello! Vue CLI + Webpack + html-loader</h2>
|   </div>
 @ ./src/main.js 4:0-31 6:11-14

...

npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! my-project@0.1.0 build: `vue-cli-service build`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the my-project@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

错误提示是因为它无法识别 App.vue 文件中的标签。此时，我们需要安装 html-webpack-plugin 插件，配置 vue.config.js 文件，如上文所述。

最终的 vue.config.js 配置如下：

// www.javascriptcn.com code example
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('js')
      .exclude.add(/\.vue$/)
      .end()

    config.module
      .rule('vue')
      .test(/\.vue$/)
      .use('vue-loader')
      .loader('vue-loader')
  },
  configureWebpack: {
    plugins: [
      new HtmlWebpackPlugin({
        template: './public/index.html'
      })
    ]
  },
}

修改完 vue.config.js 文件后，重新执行 npm run build，此时我们会发现，打包过程中没有出现任何错误，且生成的打包文件中包含了 HTML、JavaScript 和 CSS 等所有文件。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67bd1e9ea231b2b7edf2919c

解决 Webpack 打包过程中遇到 Unexpected token < 错误

出现错误的原因

解决方法

示例代码

接着读