定义
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 是两个概念。文章来源：https://www.toymoban.com/news/detail-847874.html
（4）主要是通过sockjs（webpack-dev-server 的依赖）在浏览器端和服务端之间建⽴⼀个 websocket ⻓连接，将 webpack 编译打包的各个阶段的状态信息告知浏览器端，同时也包括第三步中 Server 监听静态⽂件变化的信息。浏览器端根据这些 socket 消息进⾏不同的操作。当然服务端传递的最主要信息还是新模块的hash 值，后⾯的步骤根据这⼀hash 值来进⾏模块热替换。文章来源地址https://www.toymoban.com/news/detail-847874.html
到了这里，关于webpack 热更新的实现原理的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
