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

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

news 2026/1/29 1:02:17

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

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

编程新知 2026/1/28 18:07:35

网络六边形受到攻击

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 抽象 现代智能交通系统 &#xff08;ITS&#xff09; 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 &#xff08;…...

编程新知 2026/1/26 12:47:28

工业安全零事故的智能守护者：一体化AI智能安防平台

前言&#xff1a; 通过AI视觉技术&#xff0c;为船厂提供全面的安全监控解决方案&#xff0c;涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面&#xff0c;能够实现对应负责人反馈机制&#xff0c;并最终实现数据的统计报表。提升船厂…...

编程新知 2026/1/21 9:20:07

uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖

在前面的练习中&#xff0c;每个页面需要使用ref&#xff0c;onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入&#xff0c;需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...

编程新知 2025/9/14 18:41:15

CMake基础：构建流程详解

目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...

编程新知 2026/1/24 12:38:03

FastAPI 教程：从入门到实践

FastAPI 是一个现代、快速&#xff08;高性能&#xff09;的 Web 框架&#xff0c;用于构建 API&#xff0c;支持 Python 3.6。它基于标准 Python 类型提示&#xff0c;易于学习且功能强大。以下是一个完整的 FastAPI 入门教程&#xff0c;涵盖从环境搭建到创建并运行一个简单的…...

编程新知 2025/10/16 7:51:26

基于当前项目通过npm包形式暴露公共组件

1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹&#xff0c;并新增内容 3.创建package文件夹...

编程新知 2026/1/26 14:15:19

Cinnamon修改面板小工具图标

Cinnamon开始菜单-CSDN博客 设置模块都是做好的&#xff0c;比GNOME简单得多&#xff01; 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...

编程新知 2026/1/27 1:41:23

CRMEB 框架中 PHP 上传扩展开发：涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云

目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...

编程新知 2025/12/30 22:56:56

.Net Framework 4/C# 关键字（非常用，持续更新...）

一、is 关键字 is 关键字用于检查对象是否于给定类型兼容，如果兼容将返回 true，如果不兼容则返回 false，在进行类型转换前，可以先使用 is 关键字判断对象是否与指定类型兼容，如果兼容才进行转换，这样的转换是安全的。 例如有：首先创建一个字符串对象，然后将字符串对象隐…...

编程新知 2025/9/25 18:41:38