為什么我保存更改時“webpack serve”命令不刷新 html 頁面？

Question

Windows 10x64，Node.js v14.15.1，npm v6.14.8，谷歌瀏覽器41 v87.0.42801。

為什么當我使用npm start命令時，當我更改src/index.js文件並保存更改時，它不會刷新 web 頁面？ 當我保存更改時，我看到它重建了項目，但它沒有刷新 web 頁面，我每次手動按F5鍵。 這是我的簡單項目：

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')

我做錯了什么？

Answer 1

如果我用 target target: 'web' 'web' 替換target: ['web','es5']選項，那么 HMR 工作正常。