Webpack Hot Module Replacement (HMR) and Live Reload Not Working for JS and HTML Changes

I’m working on The Odin Project's Restaurant Page project and using Webpack to bundle my code. However, when I make changes to src/index.js or src/template.html, they are not reflected in the browser until I restart the development server using npm start. I expect Hot Module Replacement (HMR) or Live Reloading to work without having to restart the server.

Expected Behavior:

When I change index.js or template.html and save the files, I expect the browser to automatically reflect those changes.

Actual Behavior:

Saving index.js or template.html does not trigger a browser update. I see the following message in the browser console:

[webpack-dev-server] Server started: Hot Module Replacement enabled, Live Reloading enabled, Progress disabled, Overlay enabled. index.js:577 [HMR] Waiting for update signal from WDS...

What I’ve Tried:

• I modified devServer.watchFiles from ["./src/template.html"] to ["./src/*"], thinking it would detect changes in all files under src/, but this didn’t work.
• Cleared the cache, restarted the server, and tried it on both Firefox (v135.0) and Chrome (v132.0.6834.160).
• Verified that saving webpack.config.js does trigger updates in the terminal, but saving JS or HTML files does not.

Directory Structure:

.
├── dist
│   ├── index.html
│   └── main.js
├── package-lock.json
├── package.json
├── src
│   ├── index.js
│   ├── style.css
│   └── template.html
└── webpack.config.js

Files:

webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "dist"),
    clean: true,
  },
  devtool: "eval-source-map",
  devServer: {
    static: './dist',
    watchFiles: ['./src/*'],
    hot: true,
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/template.html",
      title: 'Development',
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.html$/i,
        loader: "html-loader",
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: "asset/resource",
      },
    ],
  },
};

package.json

{
  "name": "restaurant-page",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "webpack --watch",
    "start": "webpack serve --open",
    "build": "webpack"
  },
  "devDependencies": {
    "css-loader": "^7.1.2",
    "html-loader": "^5.1.0",
    "html-webpack-plugin": "^5.6.3",
    "style-loader": "^4.0.0",
    "webpack": "^5.97",
    "webpack-cli": "^6.0.1",
    "webpack-dev-server": "^5.2.0"
  }
}

Questions:

• Is there something wrong with my Webpack configuration that’s preventing Hot Module Replacement or Live Reloading from working correctly?
• How can I make sure that both JavaScript and HTML changes trigger browser updates automatically without restarting the server?

Thanks in advance for your help!