Webpack properly compiles, but updates not recognized from webpack-dev-server - node.js

Question

I am trying to enable webpack-dev-server's hot-reload functionality on a multi-page site based at local.www.my-domain.com. The website is running locally inside a docker container.
The pages are written in php and rendered on Twig templates. Each page inherits from a master template, and each page's bundle is also conditionally rendered on this master template using a relative path (I do not inject anything from webpack itself). The bundles are loaded appropriately and run fine with this webpack config:
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()
],
},
}
Note: I call a function called crawler.getPaths() in the config to retrieve pages that I want rendered; the page objects have this structure:
{
ext: 'js',
fileName: 'file',
filePath: '_snippets/',
templatePath: '_snippets/file.twig',
templateExt: 'twig'
}
However, I am having trouble introducing webpack-dev-server so that the pages update automatically. I tweaked the src attribute of the script tag that renders the bundle to instead point to a full path: http://local.www.my-domain-com:8080/web/dist/bundles/<name>.js.
Then I added a publicPath key to webpack's output object and added a devServer, watch, and watchOptions objects as well.
The bundles load appropriately when I visit http://local.www.my-domain-com:8080/web/dist/bundles/<name>.js. When the corresponding bundle is updated, webpack-dev-server does recompile. However, the recompiled page is not sent to http://local.www.my-domain-com:8080/web/dist/bundles/<name>.js; I need to hit refresh to see the update.
Furthermore, when I visit local.www.my-domain.com/path/, the corresponding :8080/web/dist/bundles/<name>.js bundle is visible and loaded in the 'Sources' tab of Chrome dev-tools, but the bundle is never run nor updated.
Here is the config I am using for the 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,
}
The webpack-dev-server is a proxy for the website's Nginx server, which is running inside a docker container.
Any ideas what I need to do to get this running? And please let me know if I can provide anymore information :)