webpack原理之-打包流程热更新HMR

webpack打包流程?

  1. 初始化: 启动构建,读取与合并配置参数,加载Plugin,实例化Compiler;

  2. 编译: 从 entry出发,针对每个 Module 串行调用对应的 loader 去翻译文件的内容,再找到该 Module 依赖的Module,递归地进行编译处理;

  3. 输出:将编译后的 Module 组合成 Chunk,将 Chunk 转换成文件,输出到文件系统中。

loader和plugin到底是什么呢?

loader即文件加载器:用来预处理文件。

plugin即插件:用来增强功能。

比如css-loader, 就是解析CSS文件,并处理CSS中的依赖关系,可以将css都提取出来,如果js中包含css代码,会为其创建一个css文件。

处理一个文件可以使用多个loader,loader的执行顺序和配置中的顺序是相反的,最后一个loader最先执行,第一个loader最后执行。

第一个执行的loader接受源文件作为参数内容,其他的loader接受前一个loader的返回值作为自己的参数,最后一个执行的loader会返回此模块的JavaScript源码。

loader即为文件加载器,操作的是文件,将文件A通过loader转换成文件B,是一个单纯的文件转化过程。

plugin即为插件,是一个扩展器,丰富webpack本身,增强功能 ,针对的是在loader结束之后,webpack打包的整个过程,它并不直接操作文件,而是基于事件机制工作,监听webpack打包过程中的某些节点,执行广泛的任务。

webpack 在编译代码过程中,会触发一系列 Tapable 钩子事件,插件所做的,就是找到相应的钩子,往上面挂上自己的任务,也就是注册事件,这样,当 webpack 构建的时候,插件注册的事件就会随着钩子的触发而执行了。

webpack热更新如何实现的?HMR

Hot Module Replacement,可以理解为模块热替换,指在应用程序运行的过程中,替换、添加、删除模块,而无需重新刷新整个应用。

具体过程如下:

1. webpack在watch模式下,利用webpack-dev-server 和 webpack 之间的接⼝交互,监听文件变化,如果更改内容,就会将变化的内容重新编译,存在内存里;

2. 通过 sockjs(webpack-dev-server 的依赖)在浏览器端和服务端之间建⽴⼀个 websocket ⻓连接,将 webpack 编译打包的各个阶段的状态信息告知浏览器端,同时也包括 Server 监听静态⽂件变化的信息。浏览器端根据这些 socket 消息进⾏不同的操作。服务端传递的最主要信息还是新模块的 hash 值,后⾯的步骤根据这⼀ hash 值来进⾏模块热替换;

3. HMR的 runtime 拿到了更新后的hash只,会向server端发送请求获取更新列表,然后再发送一次请求获取所有更新内容的代码;

4. 将新旧模块进行对比,决定是否更新,如果确定更新,就会检查模块之间的依赖关系,更新依赖引用;

5. 当HMR失败后,会触发live reload,刷新页面,获取最新的chunk。

  • 通过webpack-dev-server创建两个服务器:提供静态资源的服务(express)和Socket服务
  • express server 负责直接提供静态资源的服务(打包后的资源直接被浏览器请求和解析)
  • socket server 是一个 websocket 的长连接,双方可以通信
  • 当 socket server 监听到对应的模块发生变化时,会生成两个文件.json(manifest文件)和.js文件(update chunk)
  • 通过长连接,socket server 可以直接将这两个文件主动发送给客户端(浏览器)
  • 浏览器拿到两个新的文件后,通过HMR runtime机制,加载这两个文件,并且针对修改的模块进行更新

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/768609.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Spring Boot集成zxing实现生成二维码功能

1.二维码介绍 二维码QR Code(Quick Response Code) 由Denso公司于1994年9月研制的一种矩阵二维码符号,它具有一维条码及其它二维条码所具有的信息容量大、可靠性高、可表示汉字及图象多种文字信息、保密防伪性强等优点。 ZXing 一个支持在图像中解码和生成条形码(如…

【python】(10)理解Python中的数据聚合和分组运算

系列文章回顾 【python】(01)初识装饰器Decorator 【python】(02)初识迭代器Iterator 【python】(03)初识生成器Generator 【python】(04)python中实现多任务并发和并行的区别 【python】(05)如何使用python中的logging模块记录日志信息 【python】(06)理解Python中的 lambda 、…

数学是赋予不同事物相同名字的艺术

“数学是赋予不同事物相同名字的艺术。”~亨利庞加莱 ”数学是赋予不同事物相同名字的艺术“反映了数学在对事物进行抽象和概括时的重要性。数学的一个重要作用就是为不同的现象或实体找到相同的模式、结构或规律,并用统一的数学语言来描述它们。通过这种方式&#…

关于C/C++,Linux/MacOS/Windows 平台虚拟内存分配

在 Windows 平台上面建议通过 VirtualAlloca、VirtualAllocaEx 核心库函数来分配虚拟内存,而不是通过 MMF(Memory Mapping File / 内存映射文件)技术来载入虚拟内存。 这是因为,在 Windows 平台上面,通过MMF技术分配的…

【Web】NKCTF 2024 个人wp(部分)

目录 my first cms 全世界最简单的CTF attack_tacooooo 属实太菜了,3/4 my first cms 一眼搜版本2.2.19 CVE -CVE-2024-27622 GitHub - capture0x/CMSMadeSimple 访问/admin/login.php 爆出弱口令,后台登录 admin Admin123 Extensions > User D…

鸿蒙实战开发-使用关系型数据库实现对账单的增、删、改、查

介绍 本Codelab以记账为例,使用关系型数据库的相关接口实现了对账单的增、删、改、查操作。实现效果如图所示: 相关概念 关系型数据库:基于关系模型来管理数据的数据库,提供了增、删、改、查等接口,也可运行输入的SQ…

Mac电脑高清媒体播放器:Movist Pro for mac下载

Movist Pro for mac是一款专为Mac操作系统设计的高清媒体播放器,支持多种常见的媒体格式,包括MKV、AVI、MP4等,能够流畅播放高清视频和音频文件。Movist Pro具有强大的解码能力和优化的渲染引擎,让您享受到更清晰、更流畅的观影体…

Matlab|【免费】基于数据驱动的模型预测控制电力系统机组组合优化

目录 1 主要内容 2 部分代码 3 程序结果 4 下载链接 1 主要内容 该程序复现文章《Feature-Driven Economic Improvement for Network-Constrained Unit Commitment: A Closed-Loop Predict-and-Optimize Framework》,程序主要做的是一个基于数据驱动的电力系统机…

51单片机学习笔记——LED闪烁和流水灯

任务分析 首先要知道LED闪烁主要是怎么工作的,闪烁亮灭自然是一下为高一下为低,亮灭的频率则需要延时来进行控制。 上节已经知道了如何点亮那延时如何做呢首先先编写主框架 这样是否可以通过循环将LED灯一直循环闪烁。 以为while一直在循环所以其实是可…

[Java基础揉碎]final关键字

目录 介绍 在某些情况下,程序员可能有以下需求,就会使用到final final注意事项和讨论细节 1) final修饰的属性又叫常量,一般用XX_XX_XX来命名 2) final修饰的属性在定义时,必须赋初值,并且以后不能再修改&#…

【Android 内存优化】Koom核心内存指标分析

文章目录 源码Runtime.getRuntime()/proc/self/status/proc/meminfo 附总结 获取内存的指标有很多,假如我们要写一个用于监控APP内存泄漏的框架的话,主要获取哪些指标呢? 这篇文章来研究下KOOM里面获取到是哪些指标。 下面正文开始&#xff…

Spring Cloud五:Spring Cloud与持续集成/持续部署(CI/CD)

Spring Cloud一:Spring Cloud 简介 Spring Cloud二:核心组件解析 Spring Cloud三:API网关深入探索与实战应用 Spring Cloud四:微服务治理与安全 文章目录 一、Spring Cloud在CI/CD中的角色1. 服务注册与发现:自动化管理…

Java安全 反序列化(4) CC1链-LazyMap版

Java安全 反序列化(4) CC1链-LazyMap版 实验环境:存在漏洞的版本 commons-collections3.1-3.2.1 jdk 8u71之后已修复不可利⽤ 文章目录 Java安全 反序列化(4) CC1链-LazyMap版一.跟踪挖掘CC1_LazyMap原理二.完整CC1_Lazy版Poc 接着上一篇文章我们通过ChainedTransFormer实现任意…

Linux uustat命令教程:UUCP状态查询和控制(附案例详解和注意事项)

Linux uustat命令介绍 uustat(UUCP status inquiry and control)命令在Linux中用于显示关于UUCP系统的各种类型的状态信息。它也可以用于取消或重新激活由uucp或uux发出的请求。默认情况下,uustat显示所有排队等待调用用户的作业&#xff0c…

client-go中ListAndWatch机制,informer源码详解

文章首发地址: 学一下 (suxueit.com)https://suxueit.com/article_detail/s9UMb44BWZdDRfKqFv22 先上一张,不知道是那个大佬画的图 简单描述一下流程 client-go封装部分 以pod为例 、先List所有的Pod资源,然后通过已经获取的pod资源的最大版…

SQLiteC/C++接口详细介绍sqlite3_stmt类(八)

返回:SQLite—系列文章目录 上一篇:SQLiteC/C接口详细介绍sqlite3_stmt类(七) 下一篇: SQLiteC/C接口详细介绍sqlite3_stmt类(九) 27、sqlite3_column_int 函数 sqlite3_column_int 用于返…

0.2W超精密金属膜电阻器-陶瓷封装-塑封

高精度欧姆值,温度系数低 长期稳定性,无感设计 UPSC 欧姆范围:40 Ω 至 5 MΩ UPR 欧姆范围:10 Ω 至 5 MΩ 温度系数:2 ppm/C 至 25 ppm/C 符合 RoHS 规范 由EE1/10(RE55)成品高精密金属膜电阻器选配组装而成&am…

ubuntu20.04 编译瑞芯微rv1126问题集锦

1、camera_engine_rkisp is in the dependency chain of app_demo that has added it to its _DEPENDENCIES variable without selecting it or depending on it from Config.in. Stop. 解决方案: 注释:rv1126/buildroot/package/rockchip/app_demo/Con…

go-zero处理本地事务

go-zero处理本地事务, sqlx.SqlConn 提供了基础的事务机制,官方代码 var conn sqlx.SqlConnerr : conn.TransactCtx(context.Background(), func(ctx context.Context, session sqlx.Session) error {r, err : session.ExecCtx(ctx, "insert into user (id, na…

java数据结构与算法刷题-----LeetCode75. 颜色分类

java数据结构与算法刷题目录(剑指Offer、LeetCode、ACM)-----主目录-----持续更新(进不去说明我没写完):https://blog.csdn.net/grd_java/article/details/123063846 文章目录 1. 双指针两次遍历2. 三指针 1. 双指针两次遍历 解题思路&#…