为什么我保存更改时“webpack serve”命令不刷新 html 页面？答案

【问题标题】：Why the 'webpack serve' command doesn't refresh the html page when I save the changes?为什么我保存更改时“webpack serve”命令不刷新 html 页面？
【发布时间】：2021-01-28 18:19:42
【问题描述】：

Windows 10x64、Node.js v14.15.1、npm v6.14.8、谷歌浏览器 v87.0.4280.141

为什么当我使用npm start 命令更改src/index.js 文件并保存更改时它不刷新网页？当我保存更改时，我看到它会重建项目，但它不会刷新网页，我每次手动按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')

我做错了什么？

【问题讨论】：

标签： javascript webpack webpack-dev-server webpack-5

【解决方案1】：

如果我用target: 'web' 替换target: ['web','es5'] 选项，那么HMR 工作正常。

【讨论】：