Webpack HMR配置后页面刷新解决方案

Webpack热更新机制与问题现象

查阅Webpack官方文档可知，热更新（HMR）的核心机制是局部更新：仅替换发生变化的模块，未修改或已缓存的内容保持原状。这一机制旨在提升开发效率，接下来通过一个Demo进行验证。

index.html

<!DOCTYPE html>
<html lang="zn">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>document</title>
  </head>
  <body>
     <div id="app"></div>
  </body>
</html>

bootstrap.js

import "./index.js";

index.js

let oContainer = document.getElementById("app");

let oDiv1 = document.createElement("div");
let oDiv2 = document.createElement("div");

let count = 0;
let a = "1111";
oDiv1.innerHTML = count;

oDiv1.onclick = () => {
  count++;
  oDiv1.innerHTML = count;
};
oDiv2.innerHTML = a;

oContainer.innerHTML = ''
oContainer.appendChild(oDiv1);
oContainer.appendChild(oDiv2);

webpack.config.js

const HtmlWebpackPlugin = require("html-webpack-plugin");


module.exports = {
  entry: "./bootstrap.js",
  mode: "development",
  devServer: {
    static: "./dist",
    hot: true,
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./index.html",
    }),
  ],
};

package.json

{
  "name": "webpackdevservertest",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "start": "webpack-dev-server"
  },
  "dependencies": {
    "html-webpack-plugin": "^5.5.3",
    "webpack": "^5.89.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  }
}

配置分析与初步测试

注意devServer配置中已设置hot: true。在Webpack5环境下，系统已自动引入webpack.HotModuleReplacementPlugin，因此仅需配置hot: true即可启用热更新功能。

执行npm start启动服务进行测试。初始状态下，count值为0，a值为1。点击oDiv1使其自增至2后，将a的值修改为11并保存代码。若热更新生效，页面应显示oDiv1值为2且oDiv2值为11。然而实际观察发现，oDiv1的值被重置为0，表明热更新并未按预期生效。

解决方案：手动监听文件变化

重新查阅文档后发现，热更新功能需要开发者手动监听module.hot.accept。这意味着Webpack提供的热更新并非完全开箱即用，而是提供了一个钩子机制供开发者扩展。

例如，需要修改bootstrap.js的代码实现监听逻辑。

import "./index.js";

if (module.hot) {
  module.hot.accept("./index.js", () => {});
}

通过监听index.js的文件变化，再次修改代码。尽管变量值仍会被重置，但页面并未发生整体刷新。可通过观察浏览器标签页是否出现加载转圈来确认页面未刷新。至于如何保持之前的状态，需要在module.hot.accept中自行编写相关逻辑。这也解释了为何Vue和React等框架都提供了专用的热更新Loader或Plugin。

总结与注意事项

总结而言，Webpack的热更新并非完全自动化，需要在module.hot.accept函数中自行实现更新后的具体逻辑。

到此这篇关于webpack配置完热更新会刷新整个页面的文章就介绍到这了,更多相关webpack 热更新内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

解决Webpack配置热更新后页面全刷新的问题

Webpack热更新机制与问题现象

配置分析与初步测试

解决方案：手动监听文件变化

总结与注意事项

实用工具推荐