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

问题描述

使用 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;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）