webpack - webpack 开发服务器“忘记”资产路径的原因可能是什么？

Question

用来pug-loader写我的html。根据它的说明，我require()用于模板内的资产路径，直到最近，当我Cannot GET在对模板进行更改时开始收到所有资产路径的错误时，一切都运行良好。但是他们在服务器启动时工作正常。Minimal repro 没有表现出这种行为，所以它必须对我的项目做一些事情。

目录结构：

/dist
/src
  /assets
  /scripts
  /styles
  /templates

Webpack 配置 (v5.24.3) 如下所示：

const path = require("path");
const HTMLWebpackPlugin = require('html-webpack-plugin');

const config ={
  entry: {
    index: "./src/scripts/main.js",
  },
  devtool: "inline-source-map",
  devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
    compress: true,
    host: 'localhost',
    port: 3000,
    hot: true,
    allowedHosts: []
  },
  plugins: [
    new HTMLWebpackPlugin({
      filename: 'index.html',
      template: "./src/templates/index.pug",
      chunks: ['index'],
    }),
  ],
  module: {
    rules: [
      {
        test: /\.pug$/,
        use: [
          { 
            loader: 'pug-loader'
          }
        ]
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
        generator: {
          filename: "assets/images/[name][[hash]][ext][query]"
        }
      },
    ]
  },
  resolve: {
    alias: {
      scripts: path.resolve(__dirname, "src/scripts"),
      assets: path.resolve(__dirname, "src/assets"),
    }
  },
  output: {
    filename: "scripts/[name][[contenthash]].js",
    path: path.resolve(__dirname, "dist"),
    clean: true,
    publicPath: '/',
    assetModuleFilename: "assets/[name]-[[hash]][ext][query]"
  },
  
};

module.exports = config;