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!

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!

• html
• webpack
• webpack-dev-server
• hot-module-replacement

1 Answer 1

Turns out the issue was not related to webpack configs or packages.json.

My environment was setup like this:

My project dir was linked to my WSL2 user home, but the base files lived in my windows system. When I made a copy of my project and saved it directly in my WSL2 file system everything worked.