0

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

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

如果您想复制这种情况，请在此处查看 GitHub 存储库，然后运行命令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

网络包配置：

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,
  }
};
4

0 回答 0