webpack-dev-server doesn't update HTML auto?

Question

I'm using webpack-dev-server with webpack v5 and for a reason when I made changes in my CSS and js it updated on time as expected but for HTML files I have to refresh my browser manually to see the new complied version .

src
  |-index.html
  |-index.js

webpack.config.js

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

module.exports = {
  mode: "development",
  output: {
    clean: true,
    filename: "bundel.js",
    path: path.resolve(__dirname, "dist"),
  },
  plugins: [
    new htmlWebpackPlugin({
      filename: "index.html",
      template: path.resolve(__dirname, "src", "index.html"),
    }),
  ],
};

my package.json devDependencies

"devDependencies": {
    "html-webpack-plugin": "^5.5.0",
    "webpack": "^5.70.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.7.4"
  }

I start my server with npx webpack serve --open

I added CSS file and its relative CSS loaders for testing and removed it after I make sure it work and just HTML is the problem

you can replicate the problem when you change the index.html content

Answer 1

The problem is webpack-dev-server doesn't watch HTML files by default

so I found two solutions for this :

• The first solution is built-in throw devServer by adding watchFiles:

 devServer: {
   watchFiles: ["src/*.html"],
   hot: true,
 },

• The second solution using an external plugin called browser-sync-webpack-plugin