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

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

news 2026/4/13 11:37:46

可以在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

Swin2SR技术解读：细节重构网络的残差学习机制

Swin2SR技术解读&#xff1a;细节重构网络的残差学习机制 1. 引言&#xff1a;从“放大”到“重构”的质变 想象一下&#xff0c;你有一张十年前用老手机拍的照片&#xff0c;画质模糊&#xff0c;细节全无。或者&#xff0c;你从AI绘画工具里得到了一张构图绝佳但分辨率只有…...

编程新知 2026/4/13 11:28:52

MATLAB解析pcap文件：从抓包到信号处理的完整流程

1. 为什么需要用MATLAB处理pcap文件 在雷达信号处理和无线通信领域&#xff0c;pcap文件是最常见的数据存储格式之一。这种文件格式能够完整记录网络接口捕获到的原始数据包&#xff0c;包括时间戳、协议类型和载荷数据等关键信息。对于工程师来说&#xff0c;直接从pcap文件中…...

编程新知 2026/4/13 10:51:21

前视声呐图像处理避坑指南：从像素坐标到真实距离/角度的转换原理与YOLO集成

前视声呐图像处理避坑指南&#xff1a;从像素坐标到真实距离/角度的转换原理与YOLO集成 水下机器人视觉系统的核心挑战之一&#xff0c;是如何准确解读前视声呐生成的二维图像。与光学相机不同&#xff0c;声呐图像中的每个像素点背后都隐藏着复杂的物理测量原理。许多工程师在…...

编程新知 2026/4/13 9:48:09

HCIA综合实验报告

一、实验要求1.所有PC均需要通过DHCP获取IP地址-地址池名称和设备VLAN一致&#xff0c;例如PC1-ip pool vlan10,其中只有业务B网络用户需要访问互联网web服务-需要DNS信息。2.交换机配置VLAN需要遵循最小VLAN透传原则3.利用OSPF协议使内外用户互相访问-全网可达&#xff08;设备…...

编程新知 2026/4/13 9:27:48

3大核心功能解锁Alienware设备个性化控制：告别AWCC臃肿体验

3大核心功能解锁Alienware设备个性化控制&#xff1a;告别AWCC臃肿体验 【免费下载链接】alienfx-tools Alienware systems lights, fans, and power control tools and apps 项目地址: https://gitcode.com/gh_mirrors/al/alienfx-tools 你是否厌倦了Alienware Command…...

编程新知 2026/4/13 9:01:35

终极指南：Tectonic引擎中的现代字体处理技术详解

终极指南&#xff1a;Tectonic引擎中的现代字体处理技术详解 【免费下载链接】tectonic A modernized, complete, self-contained TeX/LaTeX engine, powered by XeTeX and TeXLive. 项目地址: https://gitcode.com/gh_mirrors/te/tectonic Tectonic作为一款现代化的TeX…...

编程新知 2026/4/13 8:31:17

Lychee Rerank MM开源可部署：GitHub可获取完整代码+Dockerfile+文档

Lychee Rerank MM开源可部署&#xff1a;GitHub可获取完整代码Dockerfile文档 1. 项目概述 Lychee Rerank MM 是一个基于 Qwen2.5-VL 构建的高性能多模态重排序系统。由哈工大&#xff08;深圳&#xff09;自然语言处理团队开发&#xff0c;专门解决多模态检索场景中的精准语…...

编程新知 2026/4/13 8:00:49

通义千问2.5-7B新手入门：vLLM+WebUI镜像，手把手教你搭建智能问答系统

通义千问2.5-7B新手入门&#xff1a;vLLMWebUI镜像&#xff0c;手把手教你搭建智能问答系统 1. 引言&#xff1a;从零开始&#xff0c;10分钟拥有你的AI助手 你是不是也对大语言模型充满好奇&#xff0c;想亲手搭建一个属于自己的智能问答系统&#xff0c;但又觉得技术门槛太…...

编程新知 2026/4/13 7:52:42

GLM-4.1V-9B-Base实操手册：基于Prometheus+Grafana的GPU服务监控看板

GLM-4.1V-9B-Base实操手册&#xff1a;基于PrometheusGrafana的GPU服务监控看板 1. 模型与平台介绍 GLM-4.1V-9B-Base是智谱开源的视觉多模态理解模型&#xff0c;专注于图像内容识别、场景描述、目标问答和中文视觉理解任务。该模型已经完成Web化封装&#xff0c;可以直接用…...

编程新知 2026/4/13 7:12:19

MobaXterm高效运维：通过SSH图形化管理远程Pixel Couplet Gen服务器

MobaXterm高效运维&#xff1a;通过SSH图形化管理远程Pixel Couplet Gen服务器 1. 为什么选择MobaXterm进行远程运维 对于运维人员来说&#xff0c;管理远程服务器是日常工作的重要组成部分。特别是当我们需要管理部署在星图GPU服务器上的Pixel Couplet Gen这类AI服务时&…...

编程新知 2026/4/13 6:47:28