Angular 12 + Webpack 5环境下集成html-loader出现ReferenceError的原因与解决办法

我来帮你分析这个问题的根源和修复方案：

错误原因 #

这个报错的核心原因有两点：

1. Webpack 5的默认行为变化：Webpack 5不再默认给浏览器环境注入Node.js的核心全局变量（比如__filename、__dirname），而旧版本Webpack会自动完成这个注入操作。
2. Loader与Plugin的冲突：你同时配置了html-loader处理所有.html文件，又用HtmlWebpackPlugin来处理入口的src/index.html作为模板。这会导致html-loader把index.html编译成了JS模块，而HtmlWebpackPlugin期望的是原始HTML内容——编译后的模块代码依赖了__filename这个仅存在于Node环境的变量，在浏览器里自然就找不到了。另外要注意：Angular项目中angular2-template-loader已经负责处理组件内的HTML模板，额外的html-loader其实是多余的，反而引发了冲突。

修复方案 #

推荐两种修复方式，你可以根据需求选择：

方案一：移除多余的html-loader配置 #

因为angular2-template-loader已经能够处理Angular组件中的HTML模板（它会把组件templateUrl对应的HTML文件转换成字符串嵌入到JS代码中），所以完全不需要额外配置html-loader。直接删除Webpack配置中这段代码：

{ test: /\.html$/, loader: 'html-loader' },

之后重新运行npm run start，问题应该就能解决。

方案二：保留html-loader但排除入口模板 #

如果你确实需要html-loader处理其他HTML文件（比如非组件的静态HTML），可以修改html-loader的规则，排除入口的index.html，避免和HtmlWebpackPlugin冲突：

const path = require('path');

// ...其他配置
module: {
  rules: [
    // ...其他loader规则
    { 
      test: /\.html$/, 
      loader: 'html-loader',
      exclude: [path.resolve(__dirname, 'src/index.html')] // 排除入口模板文件
    },
  ],
},

备选方案（不推荐）：注入Node变量到浏览器环境 #

如果你一定要让html-loader处理所有HTML文件，可以通过Webpack的DefinePlugin手动注入__filename和__dirname变量，但这是一种妥协方案——因为浏览器环境本就不存在这些变量，可能带来其他潜在问题：

const webpack = require('webpack');

module.exports = {
  // ...其他配置
  plugins: [
    new HtmlWebpackPlugin({ template: 'src/index.html' }),
    new webpack.DefinePlugin({
      __filename: JSON.stringify(__filename),
      __dirname: JSON.stringify(__dirname)
    })
  ]
};

复现步骤 #

如果要复现这个问题，可以按照以下步骤操作：

1. 创建Angular 12 + Webpack 5的基础项目结构
2. 配置Webpack时同时添加html-loader处理所有.html文件，以及HtmlWebpackPlugin使用src/index.html作为模板
3. 执行npm run start启动开发服务器，即可触发__filename is not defined的错误

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