webpack5 配置完热更新会刷新整个页面

Webpack 5 的热更新配置通常是为了实现增量更新，即只更新发生变化的部分而不是整个页面。这有助于减少开发时的页面刷新次数，从而提高效率。当您在`webpack.config.js`文件中设置好热模块替换（Hot Module Replacement, HMR）相关的选项后，如使用`module.hot.accept()`监听模块变化，修改后的代码会在不刷新整个页面的情况下生效。

以下是基本的热更新配置示例[^1]：

// webpack.config.js
const path = require('path');

module.exports = {
  // ...
  devServer: {
    hot: true,
    contentBase: './dist', // 指定静态资源目录
    publicPath: '/dist/', // 设置publicPath用于打包后的资源路径
  },
  module: {
    rules: [
      // ...
      { test: /\.js$/, use: ['hot reloading'] }, // 如果有HMR插件，这里添加对应的loader
    ],
  },
};

要启动热更新服务器，您可以执行以下命令：

npx webpack serve --mode development --open

这样，每次保存代码改动时，只有受影响的模块会被重新编译并应用到浏览器中，而不会导致整个页面刷新。