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

Ayman Morsy · Accepted Answer · 2022-03-05 22:39:16Z

4

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

answered Mar 5, 2022 at 22:39

Ayman Morsy

1,4591 gold badge13 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Leonardo · Accepted Answer · 2022-03-04 18:22:18Z

0

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,
    }
};

answered Mar 4, 2022 at 18:22

Leonardo

1234 silver badges15 bronze badges

3 Comments

Ayman Morsy Over a year ago

thanks, I tried your config but still the same. can I know what version of webpack do you install also webpack-dev-server

Leonardo Over a year ago

Try the latest version of webpack, and install all the dependices you need like html-webpack-plugin,etc... Did you imported index.css in the javascript file, right?

Ayman Morsy Over a year ago

I found a solution for this problem you can check my answer. thanks for your efforts

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest