带有 html-loader 的 Webpack 5 给出了 ReferenceError答案

【问题标题】：Webpack 5 with html-loader gives ReferenceError带有 html-loader 的 Webpack 5 给出了 ReferenceError
【发布时间】：2021-10-30 11:58:31
【问题描述】：

我正在尝试在 Angular 12 + webpack 5 中运行一个 hello world 应用程序。当我尝试添加 html-loader（正如所有指南所说的那样）时，我收到以下错误。

为什么会这样？我该如何解决？

如果您想复制这种情况，请查看GitHub repo here，然后运行命令npm run start。

ERROR in   Error: /opt/tp/projects/tilt_angular/front/src/index.html:127
  /******/  __webpack_require__.b = require("url").pathToFileURL(__filename);
                                                                 ^
  ReferenceError: __filename is not defined
  
  - index.html:127 
    /opt/tp/projects/tilt_angular/front/src/index.html:127:65
  
  - index.html:146 
    /opt/tp/projects/tilt_angular/front/src/index.html:146:13
  
  - index.html:156 
    /opt/tp/projects/tilt_angular/front/src/index.html:156:12
  
  - index.js:327 HtmlWebpackPlugin.evaluateCompilationResult
    [front]/[html-webpack-plugin]/index.js:327:28
  
  - index.js:243 
    [front]/[html-webpack-plugin]/index.js:243:22
  
  - runMicrotasks
  
  - task_queues.js:97 processTicksAndRejections
    internal/process/task_queues.js:97:5
  
  - async Promise.all
  
  - async Promise.all

Webpack 配置：

const path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    bundle: './src/main.ts',
    polyfills: './src/polyfills.ts',
    // vendor: './src/vendor.ts',
  },
  mode: 'development',
  resolve: {
    extensions: ['.ts', '.js']
  },
  module: {
    rules: [
      {
        test: /\.(js)$/,
        exclude: [/node_modules/],
        loader: 'babel-loader',
      },
      {
        test: /\.ts$/,
        use: ['ts-loader', 'angular2-template-loader'],
        exclude: [/node_modules/],
      },
      {
        test: /\.html$/,
        loader: 'html-loader'
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html'
    })
  ],
  output: {
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/',
    filename: '[name].js',
    chunkFilename: '[id].chunk.js'
  },
  devServer: {
    historyApiFallback: true,
  }
};

【问题讨论】：

标签： webpack webpack-5 webpack-html-loader

【解决方案1】：

尝试升级 html-webpack-plugin。

【讨论】：