javascript - 変更を保存するときに「webpack serve」コマンドで html ページが更新されないのはなぜですか?

Question

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

コマンドを使用すると、ファイルを変更して変更を保存してnpm startも Web ページが更新されないのはなぜですか? src/index.js変更を保存するとプロジェクトが再構築されますが、Web ページが更新されず、F5毎回手動でキーを押す必要があります。これは私の簡単なプロジェクトです:

パッケージ.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
}

ソース/index.js:

console.log('Hello world')

私は何を間違えましたか？