webpack 热更新的实现原理

定义

webpack 的热更新⼜称热替换(Hot Module Replacement),缩写为HMR。 这个机制可以做到不⽤刷新浏览器⽽将新变更的模块替换掉旧的模块。

原理

webpack 的热更新在 server 及 client 端都做了处理,我们来了解一下这个过程:

(1)webpack 在 watch 模式下,文件系统中的某一个文件发生修改,webpack 监听到文件变化,根据配置文件对模块进行重新编译打包,并将打包后的代码通过简单的 JavaScript 对象保存在内存中。

(2)webpack-dev-server 与 webpack 之间的接口交互,主要是webpack-dev-middleware 调⽤ webpack暴露的 API 对代码变化进⾏监 控,并且告诉 webpack,将代码打包到内存中。

(3)webpack-dev-server 监控:当我们在配置⽂件中配置了devServer.watchContentBase 为 true 的时候,Server 会监听这些配置⽂件夹中静态⽂件的变化,变化后会通知浏览器端对应⽤进⾏ live reload。

注意,这⼉是浏览器刷新,和 HMR 是两个概念。

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

相关推荐
Larcher几秒前
JS 数据类型的八重人格与内存真相
前端·javascript
星辰徐哥4 分钟前
工具推荐:HTML5+AI开发必备的前端调试工具
前端·人工智能·html5
Full Stack Developme5 分钟前
Linux Shell 教程概览
linux·前端·chrome
Maimai108086 分钟前
Web3 前端实时通信如何落地:从 SSE 订阅到行情、订单与账户状态更新
前端·javascript·react.js·前端框架·web3·状态模式
星辰徐哥6 分钟前
技能提升:自然语言处理在HTML5前端的应用
前端·自然语言处理·html5
the_answer7 分钟前
React Server Components 深度剖析:前端架构的范式革命
前端
徐小夕8 分钟前
我们放弃了单Agent方案:HiCAD 3.0 用 Harness 做多Agent编排,把3D建模的准确率提升了30%
前端·算法·github
胡萝卜术8 分钟前
从零搞懂 AJAX:手把手带你从 XMLHttpRequest 到 fetch,彻底理解前后端数据交互
前端·后端·面试
星河耀银海9 分钟前
接口调用:HTML5前端调用AI接口的基础语法与示例
前端·人工智能·html5
HarvestHarvest11 分钟前
【Copy Web独立开发者实战:我是如何用 AI 实现网页 UI 1:1 完美复刻的?】
前端·人工智能·ui