如何修复webpack搭配html-webpack-plugin的Child compilation failed错误

错误根因 #

报错是因为babel-loader试图解析你的public/index.html模板文件：babel只能处理JavaScript/TypeScript类代码，无法识别HTML语法，因此抛出了Unexpected token (1:0)的语法错误。
触发场景是你同时配置了全局.html后缀的loader规则，以及HtmlWebpackPlugin的自定义模板，HtmlWebpackPlugin加载模板时触发了全局的loader匹配规则，导致babel的规则命中了html文件产生报错。

解决方案 #

以下三种方案按需选择即可：

方案1：排除模板文件不被html-loader处理 #

如果你的项目中存在其他需要用html-loader解析的HTML片段（比如组件内引入的HTML模板），只需要修改你的html-loader规则，把HtmlWebpackPlugin用到的入口模板排除即可：

module: {
    rules: [
      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader',
            options: {
              attrs: ['img:src', 'link:href']
              // 若使用html-loader@4及以上版本，替换上方attrs配置为：
              // sources: {
              //   list: [
              //     { tag: 'img', attribute: 'src', type: 'src' },
              //     { tag: 'link', attribute: 'href', type: 'src' }
              //   ]
              // }
            }
          }
        ],
        exclude: [
          path.resolve(__dirname, '../node_modules'),
          // 新增排除入口模板
          path.resolve(__dirname, '../public/index.html')
        ]
      },
    ]
}

方案2：删除全局html-loader配置 #

如果你的项目没有其他需要引入的HTML片段，只有HtmlWebpackPlugin用的这一个入口html文件，直接删掉匹配.html的那条loader规则即可。HtmlWebpackPlugin本身自带模板解析能力，不需要额外配置html-loader就能正常处理自定义模板。

方案3：限定babel-loader的匹配范围 #

检查你的babel-loader配置，确保它只匹配JS/TS类后缀的文件，不会命中HTML文件：

// babel-loader配置示例
{
  test: /\.(js|jsx|ts|tsx)$/,
  exclude: /node_modules/,
  use: ['babel-loader']
}

内容的提问来源于stack exchange，提问作者tony