Webpack 5 asset modules：raw-loader与asset/source使用差异问题排查

该问题本质是html-webpack-plugin的版本兼容性问题，并非asset/source和raw-loader的能力不对等，核心差异如下：

• raw-loader属于自定义loader，配置在module.rules.use字段中，旧版html-webpack-plugin的模板处理逻辑可以识别到该配置，会直接使用loader返回的HTML字符串，跳过内置的lodash模板编译步骤。
• asset/source是Webpack 5内置的资源处理能力，通过module.rules.type字段声明，5.5.0版本以下的html-webpack-plugin没有兼容该配置的识别逻辑，会判定为没有自定义HTML loader，自动对模板执行内置的lodash模板编译，编译生成的模板函数代码又被asset/source当作原始内容导出，就会出现你看到的异常输出。

按需选择以下任意方案即可：

• 方案1：调整配置避开内置模板编译，给html-webpack-plugin的模板路径加专属查询参数，同时给asset/source规则匹配该参数，示例配置如下：

module.exports = {
  // 其余配置保持不变
  module: {
    rules: [
      // 其他规则不变
      { test: /\.html$/, type: 'asset/source', resourceQuery: /raw/ }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'index.html?raw',
    }),
  ]
};

• 方案2：给asset/source规则加排除项，排除作为html-webpack-plugin模板的HTML文件，适合仅在业务代码中需要导入HTML原始内容的场景：

{ test: /\.html$/, type: 'asset/source', exclude: /index\.html$/ }

• 方案3：将html-webpack-plugin升级到5.5.0及以上版本，新版本已经兼容Webpack 5 Asset Modules的识别逻辑，检测到存在asset/source类型的HTML处理规则时，会自动跳过内置模板编译，直接使用返回的原始内容，无需额外调整其他配置。

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