Webpack 5 livereload enabled but not working - docker

Question

I'm having trouble with the Live Reload in Webpack 5 not working. The browser console says:
[webpack-dev-server] Live Reloading enabled.
but it does not reload when I change/save a file. There are no errors in the browser console or terminal.
I'm on Windows 10, using an official Alpine Linux Docker image; my browser is Chrome Version 102.0.5005.63 (Official Build) (64-bit). The project is a fairly simple front end web app.
My package.json dev dependencies:
"devDependencies": {
"html-webpack-plugin": "^5.5.0",
"webpack": "^5.72.0",
"webpack-cli": "^4.9.2",
"webpack-dev-server": "^4.9.0",
"webpack-webmanifest-loader": "^2.0.2" }
My webpack.config.js file:
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: "./src/index.js",
mode: "development",
devtool: "inline-source-map",
target: "web",
devServer: {
static: {
directory: path.join(__dirname, "src"),
},
compress: true,
hot: false,
port: 3000,
liveReload: true,
watchFiles: "./src/*",
},
plugins: [
new HtmlWebpackPlugin({
title: "Title",
template: "src/index.html",
}),
],
output: {
filename: "[name].bundle.js",
path: path.resolve(__dirname, "dist"),
clean: true,
},
module: {
rules: [
{
test: /\.(png|svg|webp|jpg|jpeg)$/i,
type: "asset/resource",
},
{
test: /\.(json|txt|mp3)$/i,
type: "asset/resource",
},
{
test: /\.webmanifest$/i,
use: "webpack-webmanifest-loader",
type: "asset/resource",
},
],
},
};
When starting the dev server I use the following commands:
npx webpack serve --static assets
My file/folder structure:
New to Webpack in general. Please help!

Answer 1

After sifting through lots of google searches, I finally found a solution in the official webpack documentation: watchOptions.
If watching does not work for you, try out this option. This may help issues with NFS and machines in VirtualBox, WSL, Containers, or Docker. In those cases, use a polling interval and ignore large folders like /node_modules/ to keep CPU usage minimal.
Sooo.... still not sure why it doesn't work with the regular watch option, but polling does work at this time in a docker container.
Here's my webpack.config.js file:
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: "./src/index.js",
mode: "development",
devtool: "inline-source-map",
target: "web",
devServer: {
static: ["assets"],
compress: true,
hot: false,
port: 3000,
},
watchOptions: {
ignored: "/node_modules/",
poll: 1000, // Check for changes every second
},
output: {
filename: "[name].bundle.js",
path: path.resolve(__dirname, "dist"),
clean: true,
},
plugins: [
new HtmlWebpackPlugin({
title: "Title",
template: "src/index.html",
}),
],
module: {
rules: [
{
test: /\.(png|svg|webp|jpg|jpeg|json|txt|mp3)$/i,
type: "asset/resource",
},
{
test: /\.webmanifest$/i,
use: "webpack-webmanifest-loader",
type: "asset/resource",
},
],
},
};
I use the following command to start it:
npx webpack serve