当前位置：首页 > news >正文

webpack配置完热更新之后还是会刷新整个页面

news 2025/11/24 23:39:28

可以在webpack文档中找到有关热更新的详细信息，意思就是，开启热更新之后，整个页面你改了哪里，就只更新哪里，其他没变的，或者保存在缓存里面的内容，都不会改变，感谢很神奇！很方便！直接写个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的文件变化。然后再次更改，虽然值还是会被重置。但是页面没有刷新，页面是否刷新，大家可以看一下当前tab页每次更新完是否会转圈，如果没有转圈，就说明没有刷新页面，而至于各种状态如何保持之前状态，需要大家自己在module.hot.accept中自行编写对应逻辑。这也说明了无论是vue，还是react都有自己自带的热更新的loader或者plugins。

最后总结一下，webpack的热更新并不是开箱即用的，而是需要再webpack提供的module.hot.accept函数中，自行实现对应的热更新之后的逻辑。

webpack配置完热更新之后还是会刷新整个页面

相关文章：

webpack配置完热更新之后还是会刷新整个页面

2023年第六届传智杯程序设计挑战赛（个人赛）B组赛后复盘

C语言——深入理解指针（2）

【已解决】HBase 2.2.6 集群部署后，从节点未启动 HRegionServer

JVM——垃圾回收（方法区中的垃圾回收和（堆回收）自动垃圾回收）

Flink 常用物理分区算子(Physical Partitioning)

Leetcode.560 和为 K 的子数组

linklab phase1 更简单的方法

8.前端--CSS-文本属性【2023.11.26】

容器技术——Cgroup

uniapp+vue3路由跳转传参

流量主如何在广告收益和用户体验中找到平衡

RPC和HTTP的区别

Dubbo3使用Zookeeper作为注册中心的方案讨论！详解DubboAdmin与PrettyZoo来监控服务的优劣！

前端uni微信小程序和后端nodejs使用websoket

java小游戏之【王者荣耀】

QT网络协议知识体系（一）

【数据库】表的连接在执行时的算法解析，嵌套循环连接算法的几种实现，多表连接中表的数量会影响什么

【刷新：重新发现商业与未来】书笔记

Lua实现面向对象三大特性

Python｜GIF 解析与构建（5）：手搓截屏和帧率控制

HTML 语义化

《Qt C++ 与 OpenCV：解锁视频播放程序设计的奥秘》

JavaScript 中的 ES|QL：利用 Apache Arrow 工具

大型活动交通拥堵治理的视觉算法应用

Nuxt.js 中的路由配置详解

Springcloud：Eureka 高可用集群搭建实战（服务注册与发现的底层原理与避坑指南）

Module Federation 和 Native Federation 的比较

基于SpringBoot在线拍卖系统的设计和实现

在 Spring Boot 中使用 JSP