javascript - Why the 'webpack serve' command doesn't refresh the html page when I save the changes?

Question

Windows 10x64, Node.js v14.15.1, npm v6.14.8, Google Chrome v87.0.4280.141

Why when I use the npm start command it doesn't refresh the web page when I change the src/index.js file and save the changes? I see it rebuilds the project when I save the changes, but it doesn't refresh web page and I am to press F5 key each time manualy. This is my simple project:

package.json:

{
  "name": "w5",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "build:dev": "npx webpack --mode development",
    "build:prod": "npx webpack --mode production",
    "start": "npx webpack serve --mode development --open"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^3.0.0",
    "html-webpack-plugin": "^4.5.1",
    "webpack": "^5.18.0",
    "webpack-cli": "^4.4.0",
    "webpack-dev-server": "^3.11.2"
  }
}

webpack.config.js:

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')

module.exports = env => {

    const config = {
        mode: 'development',
        target: ['web','es5'],
        context: path.resolve(__dirname, 'src'),
        entry: {
            main: './index.js'
        },
        output: {
            filename: '[name].js',
            path: path.resolve(__dirname,'dist')
        },
        resolve: {
            extensions: ['.js','.json']
        },
        plugins: [
            new CleanWebpackPlugin(),
            new HtmlWebpackPlugin({
                title: 'Webpack 5'
            })
        ],
        devServer: {
            port: 3000,
            hot: true
        }
    }
    return config
}

src/index.js:

console.log('Hello world')

What I did wrong?

question from:https://stackoverflow.com/questions/65943037/why-the-webpack-serve-command-doesnt-refresh-the-html-page-when-i-save-the-ch

Answer 1

If I replace target: ['web','es5'] option by target: 'web' then HMR works fine.