webpack 热更新的实现原理

webpack 的热更新⼜称热替换(Hot Module Replacement),缩写为HMR。这个机制可以做到不⽤刷新浏览器⽽将新变更的模块替换掉旧的模块。
原理:
在这里插入图片描述

⾸先要知道 server 端和 client 端都做了处理⼯作:

  1. 在 webpack 的 watch 模式下,⽂件系统中某⼀个⽂件发⽣修改,webpack 监听到⽂件变化,根据配置⽂件对模块重新编译打包,并将打包后的代码通过简单的JavaScript对象保存在内存中。
  2. webpack-dev-server 和 webpack 之间的接⼝交互,⽽在这⼀步,主要是 dev-server 的中间件webpack- dev-middleware和 webpack 之间的交互,webpack-dev-middleware 调⽤webpack暴露的 API 对代码变化进⾏监 控,并且告诉webpack,将代码打包到内存中。
  3. webpack-dev-server 对⽂件变化的⼀个监控,这⼀步不同于第⼀步,并不是监控代码变化重新打包。当我们在配置⽂件中配置了 devServer.watchContentBase 为 true 的时候,Server 会监听这些配置⽂件夹中静态⽂件的变化,变化后会通知浏览器端对应⽤进⾏ live reload。注意,这⼉是浏览器刷新,和HMR 是两个概念。
  4. webpack-dev-server 代码的⼯作,该步骤主要是通过sockjs(webpack-dev-server 的依赖)在浏览器端和服务端之间建⽴⼀个 websocket ⻓连接,将 webpack 编译打包的各个阶段的状态信息告知浏览器端,同时也包括第三步中Server 监听静态⽂件变化的信息。浏览器端根据这些 socket 消息进⾏不同的操作。当然服务端传递的最主要信息还是新模块的 hash 值,后⾯的步骤根据这⼀hash 值来进⾏模块热替换。
  5. webpack-dev-server/client 端并不能够请求更新的代码,也不会执⾏ 热 更 模 块 操 作 , ⽽ 把 这 些 ⼯ 作⼜交回给了webpack,webpack/hot/dev-server 的 ⼯ 作就是根据webpack-dev-server/client 传给它的信息以及dev-server的配置决定是刷新浏览器呢还是进⾏模块热更新。当然如果仅仅是刷新浏览器,也就没有后⾯那些步骤了。
  6. HotModuleReplacement.runtime 是客户端HMR 的中枢,它接收到上⼀ 步 传 递 给 他 的 新 模 块 的hash 值,它通过JsonpMainTemplate.runtime 向 server 端发送Ajax 请求,服务端返回⼀个 json,该 json 包含了所有要更新的模块的hash 值,获取到更新列表后,该模块再次通过 jsonp 请求,获取到最新的模块代码。这就是上图中 7、8、9 步骤。
  7. ⽽第 10 步是决定 HMR 成功与否的关键步骤,在该步骤中,HotModulePlugin 将会对新旧模块进⾏对⽐,决定是否更新模块,在决定更新模块后,检查模块之间的依赖关系,更新模块的同时更新模块间的依赖引⽤。

最后⼀步,当 HMR 失败后,回退到 live reload 操作,也就是进⾏浏览器刷新来获取最新打包代码。

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

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

相关文章

BANI时代下的项目管理:如何迎接挑战与机遇

BANI时代的介绍与特点 BANI时代的起源 BANI这个概念首次被提出是为了描述和理解我们所处的复杂、多变、不确定的时代。与VUCA(Volatile, Uncertain, Complex, Ambiguous)相比,BANI更加准确地捕捉了我们面临的现实挑战。VUCA重点关注外部环境…

学习篇之React Fiber概念及原理

什么是React Fibber? React Fiber 是 React 框架的一种底层架构,为了改进 React 的渲染引擎,使其更加高效、灵活和可扩展。 传统上,React 使用一种称为堆栈调和递归算法来处理虚拟 DOM 的更新,这种方法在大型应用或者…

macOS使用ffmpeg与QT进行音视频推拉流

1.先启动流服务器 ./mediamtx 2.开始推流: ffmpeg -re -stream_loop -1 -i /Users/hackerx/Desktop/test.mp4 -c copy -rtsp_transport tcp -f rtsp rtsp://127.0.0.1:8554/stream 3. 安装ffmpeg 4.4 brew install ffmpeg4 4.添加ffmpeg头文件目录与库目录 5.链接ffmpeg相关库…

使用QT纯代码创建(查找)对话框详细步骤与代码

一、创建项目文件 打开Qt Creator->文件->新建文件或项目->选择Qt Widgets Application 为项目起名字 输入类的名字 二、 了解每个文件的作用 项目创建完毕之后就会出现以下几个文件,先来分别介绍以下这些文件的作用。 Headers->finddialog.h——很显…

如何通过CSS选择器选择一个元素的子元素?如何选择第一个子元素和最后一个子元素?

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 选择一个元素的子元素⭐ 选择第一个子元素和最后一个子元素⭐ 注意事项⭐ 写在最后 ⭐ 专栏简介 前端入门之旅:探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅&…

0基础学习VR全景平台篇 第81篇:全景相机-临云镜如何直播推流

临云镜全景相机是阿里巴巴定制全景设备,实现空间三维信息的快速采集,与阿里云三维空间重建平台搭配,帮助品牌商与平台以较低的成本完成空间的快速采集,并支持对室内/室外空间的三维全景展示及空间漫游,同时支持VR浏览、…

8.10论文阅读

文章目录 The multimodal MRI brain tumor segmentation based on AD-Net摘要本文方法损失函数 实验结果 max-vit - unet:多轴注意力医学图像分割摘要本文方法实验结果 The multimodal MRI brain tumor segmentation based on AD-Net 摘要 基于磁共振成像(MRI)的多模态胶质瘤…

轻松转换TS视频为MP4,实现优质视频剪辑体验

如果你是一个视频剪辑爱好者,你一定会遇到各种视频格式之间的转换问题,特别是将TS视频转换为MP4格式。别担心,我们的视频剪辑软件将为你提供最简单、高效的解决方案! 首先第一步,我们要进入媒体梦工厂主页面&#xff…

c语言经典例题讲解(输出菱形,喝汽水问题)

目录 一、输出菱形 二、喝汽水问题 方法1:一步一步来 方法二:直接套公式 一、输出菱形 输出类似于下图的菱形: 通过分析:1、先分为上下两部分输出 2.在输出前先输出空格 3.找规律进行输出 可知,可令上半部分lin…

小米平板6Max14即将发布:自研G1 电池管理芯片,支持33W反向快充

明天晚上7点(8 月 14 日),雷军将进行年度演讲,重点探讨“成长”主题。与此同时,小米将推出一系列全新产品,其中包括备受瞩目的小米MIX Fold 3折叠屏手机和小米平板6 Max 14。近期,小米官方一直在…

Fastjson 使用指南

文章目录 Fastjson 使用指南0 简要说明为什么要用JSON?用JSON的好处是什么?为什么要用JSON?JSON好处 1 常用数据类型的JSON格式值的范围 2 快速上手2.1 依赖2.2 实体类2.3 测试类 3 常见用法3.1 序列化操作核心操作对象转换为JSON串list转换J…

IC设计仿真云架构

对于IC仿真来说,最重要的是要安全、可维护、高性能的的HPC环境环境。 那么云上如何搭建起一套完整的IC仿真云环境呢? 这种架构应该长什么样子? 桌面虚拟化基础架构 将所有桌面虚拟机在数据中心进行托管并统一管理;同时用户能够…