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

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

news 2025/9/12 12:39:44

可以在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文档中找到有关热更新的详细信息&#xff0c;意思就是&#xff0c;开启热更新之后&#xff0c;整个页面你改了哪里&#xff0c;就只更新哪里&#xff0c;其他没变的&#xff0c;或者保存在缓存里面的内容&#xff0c;都不会改变&#xff0c;感谢很神奇&#xff01…...

编程日记 2023/11/26 18:59:39

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

传智杯赛后复盘 大家好 我是寸铁&#x1f44a; 2023年第六届传智杯程序设计挑战赛&#xff08;个人赛&#xff09;B组 赛后复盘 喜欢的小伙伴可以点点关注 &#x1f49d; 1. 字符串拼接 细节&#xff1a;一定要清楚nextLine()和next()的区别 nextLine()是遇到回车会停下来 nex…...

编程日记 2023/11/26 18:57:37

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

目录 1. 数组名 2. 指针访问数组 3. 一维数组的传参&#xff08;本质&#xff09; 4. 冒泡排序 5. 二级指针 6. 指针数组&#xff08;指针的数组&#xff09; 7. 指针数组模拟二维数组 1. 数组名 在之前的代码中我们使用指针访问过数组的内容。 int arr[10] {1,2,3,4…...

编程日记 2023/11/26 18:55:35

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

问题发现 今天搭建了 HBase 2.2.6 集群环境&#xff0c;启动之后发现&#xff0c;从节点的 HRegionServer 未启动。多次对比参数设置仍然未发现异常。而启动之前的 HBase 2.4.11 则完成正常&#xff0c;我就有点怀疑是不是 HBase 2.2.6 集群搭建有什么特殊的地方&#xff1f; …...

编程日记 2023/11/26 18:54:34

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

目录 1.自动垃圾回收介绍1.C/C的内存管理2.Java的内存管理3.垃圾回收的对比 2.方法区的回收方法区的回收 – 手动触发回收 3.堆回收1.引用计数法2.可达性分析算法 1.自动垃圾回收介绍 1.C/C的内存管理 ⚫ 在C/C这类没有自动垃圾回收机制的语言中&#xff0c;一个对象如果不再…...

编程日记 2023/11/26 18:53:32

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

Flink 物理分区算子(Physical Partitioning) 在Flink中&#xff0c;常见的物理分区策略有&#xff1a;随机分配(Random)、轮询分配(Round-Robin)、重缩放(Rescale)和广播(Broadcast)。 接下来&#xff0c;我们通过源码和Demo分别了解每种物理分区算子的作用和区别。 (1) 随机…...

编程日记 2023/11/26 18:52:31

Leetcode.560 和为 K 的子数组

题目链接 Leetcode.560 和为 K 的子数组 mid 题目描述 给你一个整数数组 n u m s nums nums 和一个整数 k k k &#xff0c;请你统计并返回 该数组中和为 k k k 的子数组的个数 。 子数组是数组中元素的连续非空序列。 示例 1&#xff1a; 输入&#xff1a;nums [1,1,1]…...

编程日记 2023/11/26 18:51:30

linklab phase1 更简单的方法

直接反汇编phase1.o&#xff0c;看eax中是0x21&#xff0c;0x21在数据域中&#xff0c;直接把从第21个字节的内容改为0000000000即可。...

编程日记 2023/11/26 18:50:29

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

CSS Text&#xff08;文本&#xff09;属性可定义文本的外观&#xff0c;比如文本的颜色、对齐文本、修饰文本、文本缩进、行间距等 1.文本颜色 color 属性用于定义文本的颜色。 语法&#xff1a; div { color: red; }属性&#xff1a; 2.文本对齐 text-align 属性用于设置元…...

编程日记 2023/11/26 18:48:27

容器技术——Cgroup

目录 容器技术容器技术概述要区分好共享与隔离的概念容器技术的三大核心容器对比虚拟机 namespaceUnionFs容器操作系统的来源操作系统的来源完整操作系统的镜像docker image是什么&#xff1f;如何构成的 如何为容器安装操作系统UnionFS&#xff08;联合文件系统&#xff09;的…...

编程日记 2023/11/26 18:47:25

uniapp+vue3路由跳转传参

在uni-app中使用Vue 3进行路由跳转传参&#xff0c;可以通过以下步骤实现&#xff1a; 1.在router文件夹中创建一个名为index.js的文件&#xff0c;用于配置路由。在这个文件中&#xff0c;我们将导入createRouter和createWebHistory函数&#xff0c;并定义路由规则。同时&…...

编程日记 2023/11/26 18:46:24

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

流量主在广告收益和用户体验之间找到平衡是一个关键的挑战&#xff0c;因为过多或不恰当的广告可能会影响到用户的满意度和留存率。以下是一些方法&#xff0c;可以帮助流量主在这两者之间找到平衡&#xff1a; admaoyan猫眼聚合 优质内容为先&#xff1a; 提供高质量、有价值的…...

编程日记 2023/11/26 18:45:24

RPC和HTTP的区别

目录 1、RPC是什么 1.1 概念 1.2 RPC的组成部分 1.3 常见的 RPC 技术和框架 1.4 RPC的工作流程 2、HTTP是什么 2.1 概念 2.2 HTTP的消息格式 2.3 HTTP响应状态码有哪些 3、⭐RPC和HTTP的区别 小结 1、RPC是什么 1.1 概念 RPC&#xff08;Remote Procedure Call&am…...

编程日记 2023/11/26 18:44:22

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

文章目录 一&#xff1a;Dubbo注册中心的基本使用 二&#xff1a;Zookeeper注册中心的使用 1&#xff1a;依赖引入 2&#xff1a;实际开发 三&#xff1a;Zookeeper作为注册中心的使用展示 1&#xff1a;启动注册Zookeeper服务 2&#xff1a;引入注册中心 (一)&#xf…...

编程日记 2023/11/26 18:43:21

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

需求 前端向后台服务器发请求获取验证码&#xff0c;然后端游输入验证码&#xff0c;向我的后端发请求获取验证信息。后台给游戏端返回信息的时候同时给微信小程序端返回验证结果。意思是不要微信小程序端主动触发&#xff0c;验证是否绑定的请求。 思路 后端生成验证码时存…...

编程日记 2023/11/26 18:42:20

java小游戏之【王者荣耀】

首先创建一个新的Java项目命名为“王者荣耀”&#xff0c;并在src下创建两个包分别命名为“com.sxt"、”com.stx.beast",在相应的包中创建所需的类。 代码 package com.sxt;import javax.swing.*; import java.awt.*;public class Background extends GameObject {p…...

编程日记 2023/11/26 18:41:19

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

//获取主机的名称和ip地址 //获取主机的所有信息...

编程日记 2023/11/26 18:40:17

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

嵌套循环连接 ​专栏内容&#xff1a; 手写数据库toadb 本专栏主要介绍如何从零开发&#xff0c;开发的步骤&#xff0c;以及开发过程中的涉及的原理&#xff0c;遇到的问题等&#xff0c;让大家能跟上并且可以一起开发&#xff0c;让每个需要的人成为参与者。 本专栏会定期更新…...

编程日记 2023/11/26 18:38:15

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

收获 同理心&#xff1a;站在他人角度考虑他人感受&#xff0c;他人需要什么&#xff0c;我能提供什么&#xff1b;他人可以是员工&#xff0c;家人等&#xff1b;对于员工来讲核心四件事&#xff1a;1、薪水&#xff1b;2、有结果&#xff1b;3、有成长&#xff1b;4、工作开…...

编程日记 2023/11/26 18:37:15

Lua实现面向对象三大特性

面向对象是基于table实现的 封装 :(冒号) 自动将调用该函数的对象作为第一个参数传入 --Object就是第一参数 function Object:new() self&#xff1a;代表默认传入的第一个参数 _index&#xff1a;当自己的变量中找不到时&#xff0c;会默认找原表中_index指向的内容 Obj…...

编程日记 2023/11/26 18:36:14

后进先出（LIFO）详解

LIFO 是 Last In, First Out 的缩写&#xff0c;中文译为后进先出。这是一种数据结构的工作原则&#xff0c;类似于一摞盘子或一叠书本&#xff1a; 最后放进去的元素最先出来 -想象往筒状容器里放盘子&#xff1a; &#xff08;1&#xff09;你放进的最后一个盘子&#xff08…...

编程新知 2025/9/11 14:46:46

k8s从入门到放弃之Ingress七层负载

k8s从入门到放弃之Ingress七层负载 在Kubernetes&#xff08;简称K8s&#xff09;中&#xff0c;Ingress是一个API对象&#xff0c;它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress&#xff0c;你可…...

编程新知 2025/9/7 0:12:53

（二）TensorRT-LLM | 模型导出（v0.20.0rc3）

0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述&#xff0c;后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作&#xff0c;其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...

编程新知 2025/9/10 15:42:25

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...

编程新知 2025/9/11 12:54:55

【机器视觉】单目测距——运动结构恢复

ps&#xff1a;图是随便找的&#xff0c;为了凑个封面 前言 在前面对光流法进行进一步改进&#xff0c;希望将2D光流推广至3D场景流时&#xff0c;发现2D转3D过程中存在尺度歧义问题&#xff0c;需要补全摄像头拍摄图像中缺失的深度信息&#xff0c;否则解空间不收敛&#xf…...

编程新知 2025/9/11 12:54:40

Frozen-Flask ：将 Flask 应用“冻结”为静态文件

Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是&#xff1a;将一个 Flask Web 应用生成成纯静态 HTML 文件&#xff0c;从而可以部署到静态网站托管服务上&#xff0c;如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...

编程新知 2025/7/28 21:04:40

Linux云原生安全：零信任架构与机密计算

Linux云原生安全&#xff1a;零信任架构与机密计算 构建坚不可摧的云原生防御体系 引言&#xff1a;云原生安全的范式革命 随着云原生技术的普及&#xff0c;安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测&#xff0c;到2025年&#xff0c;零信任架构将成为超…...

编程新知 2025/8/17 17:11:47

【git】把本地更改提交远程新分支feature_g

创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...

编程新知 2025/8/15 18:53:03

让AI看见世界：MCP协议与服务器的工作原理

让AI看见世界&#xff1a;MCP协议与服务器的工作原理 MCP&#xff08;Model Context Protocol&#xff09;是一种创新的通信协议&#xff0c;旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天&#xff0c;MCP正成为连接AI与现实世界的重要桥梁。…...

编程新知 2025/8/25 20:08:49

ArcGIS Pro制作水平横向图例+多级标注

今天介绍下载ArcGIS Pro中如何设置水平横向图例。 之前我们介绍了ArcGIS的横向图例制作&#xff1a;ArcGIS横向、多列图例、顺序重排、符号居中、批量更改图例符号等等&#xff08;ArcGIS出图图例8大技巧&#xff09;&#xff0c;那这次我们看看ArcGIS Pro如何更加快捷的操作。…...

编程新知 2025/9/10 18:50:42