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

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 .

I have a very simple project structure : this a repo replicate the problem https://github.com/AymanMorsy/fto

you can explore the repo online with github1s : https://github1s.com/AymanMorsy/fto/blob/HEAD/webpack.config.js

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

CodePudding user response：

Try to use the DevServer option to reload the page and compress all. Instead of running npx webpack serve --open run npm run start using this script config:

  "scripts": {
    "start": "webpack-dev-server",
    "build": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

And try to use this base config for your webpack.config.js

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

module.exports = {
    // Default settings 
    mode:'development',
    devtool:'inline-source-map',
    entry:{
        main: path.join(__dirname,'src','index.js')
    },
    output:{
        filename:'index.js',
        path: path.resolve(__dirname,'dist'),
        clean:true,
    },
    // Loaders
    module:{
        // JavaScript
        rules:[
            { 
                test: /\.js$/i, 
                use:{ 
                loader:'babel-loader', 
                options:{ 
                    "presets":['@babel/preset-react']
                }}
            },
            // Css
            {
                test: /\.css$/i, use:['style-loader','css-loader']
            }
        ]
    },
    // Plugins
    plugins:[
        new HtmlWebpackPlugin({
            template: path.join(__dirname,'public','index.html') ,
            filename:'index.html'
        })
    ],
    // DevServer
    devServer:{
        port:8080,
        open:true,
        compress:true,
        hot:true,
        liveReload:true,
    }
};

CodePudding user response：

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