Webpack 5 livereload enabled but not working

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