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 值来进⾏模块热替换。

相关推荐
i听风逝夜17 小时前
Web 3D地球实时统计访问来源
前端·后端
iMonster17 小时前
React 组件的组合模式之道 (Composition Pattern)
前端
呐呐呐呐呢17 小时前
antd渐变色边框按钮
前端
元直数字电路验证18 小时前
Jakarta EE Web 聊天室技术梳理
前端
wadesir18 小时前
Nginx配置文件CPU优化(从零开始提升Web服务器性能)
服务器·前端·nginx
牧码岛18 小时前
Web前端之canvas实现图片融合与清晰度介绍、合并
前端·javascript·css·html·web·canvas·web前端
灵犀坠18 小时前
前端面试八股复习心得
开发语言·前端·javascript
9***Y4818 小时前
前端动画性能优化
前端
网络点点滴18 小时前
Vue3嵌套路由
前端·javascript·vue.js
牧码岛18 小时前
Web前端之Vue+Element打印时输入值没有及时更新dom的问题
前端·javascript·html·web·web前端