时间戳

首页 > 解决方案 > 为什么我保存更改时“webpack serve”命令不刷新 html 页面？

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

问题描述

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

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

src/index.js：

console.log('Hello world')

我做错了什么？

标签： javascriptwebpackwebpack-dev-serverwebpack-5

解决方案

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

推荐阅读