Webpack 正确编译，但无法从 webpack-dev-server 识别更新

Question

我正在尝试在基于 local.www.my-domain.com 的多页站点上启用 webpack-dev-server 的热重载功能。 该网站在 docker 容器内本地运行。

这些页面用 php 编写，并在 Twig 模板上呈现。 每个页面都继承自一个主模板，并且每个页面的包也使用相对路径有条件地在此主模板上呈现（我没有从 webpack 本身注入任何内容）。 使用此 webpack 配置，捆绑包已正确加载并运行良好：

const path = require("path");
const TerserPlugin = require('terser-webpack-plugin');

const crawler = require('./crawlPaths.js');
const pages = crawler.getPaths('');

module.exports = {
    mode: 'development',
    entry: pages.reduce((config, page) => {
        config[page.filePath + page.fileName] = `./js/${page.filePath + page.fileName}.${page.ext}`;
        return config;
      }, {}),
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, '../web/dist/bundles'),
        library: {
            type: 'umd',
        },
    },
    devtool: 'inline-source-map',
    optimization: {
        splitChunks: {
            chunks: 'all', 
        },
        minimize: false,
        minimizer: [
            new TerserPlugin()
        ],
    },
}

注意：我在配置中调用了一个名为 crawler.getPaths() 的 function 来检索我想要呈现的页面； 页面对象具有以下结构：

{
  ext: 'js', 
  fileName: 'file', 
  filePath: '_snippets/', 
  templatePath: '_snippets/file.twig', 
  templateExt: 'twig'
}

但是，我在引入 webpack-dev-server 以便页面自动更新时遇到了麻烦。 我调整了渲染包的脚本标签的src属性，改为指向完整路径： http://local.www.my-domain-com:8080/web/dist/bundles/<name>.js 。

然后我向 webpack 的 output object 添加了一个publicPath键，并添加了一个 devServer、watch 和 watchOptions 对象。

当我访问http://local.www.my-domain-com:8080/web/dist/bundles/<name>.js时，捆绑包会正确加载。 当相应的包更新时，webpack-dev-server 会重新编译。 但是，重新编译的页面不会发送到http://local.www.my-domain-com:8080/web/dist/bundles/<name>.js ； 我需要点击刷新才能看到更新。

此外，当我访问local.www.my-domain.com/path/时，相应的:8080/web/dist/bundles/<name>.js包可见并加载到 Chrome 开发工具的“源”选项卡中，但捆绑包永远不会运行或更新。

这是我用于 webpack-dev-server 的配置：

const path = require("path");
const TerserPlugin = require('terser-webpack-plugin');

const crawler = require('./crawlPaths.js');
const pages = crawler.getPaths('');

module.exports = {
    mode: 'development',
    entry: pages.reduce((config, page) => {
        config[page.filePath + page.fileName] = `./js/${page.filePath + page.fileName}.${page.ext}`;
        return config;
      }, {}),
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, '../web/dist/bundles'),
        library: {
            type: 'umd',
        },
        publicPath: "http://local.www.my-domain-com:8080/web/dist/bundles",
    },
    devtool: 'inline-source-map',
    optimization: {
        splitChunks: {
            chunks: 'all', 
        },
        minimize: false,
        minimizer: [
            new TerserPlugin()
        ],
    },
    devServer: {
        static: '../web/dist/bundles',
        proxy: {
            '/': {
                target: "http://local.www.my-domain.com",
            }
        },
        allowedHosts: ".my-domain.com",
        host: '0.0.0.0', 
        hot: true,
    },
    watchOptions: {
        aggregateTimeout: 300,
        poll: 1000,
        ignored: /node_modules/,
    },
    watch: true,
}

webpack-dev-server 是网站 Nginx 服务器的代理，该服务器在 docker 容器内运行。

任何想法我需要做些什么才能让它运行？ 如果我可以提供更多信息，请告诉我:)