「这是我参与2022首次更文挑战的第3天，活动详情查看：2022首次更文挑战」。
HMR是hot module replacement的简写，简单来说它是干啥的呐，它就是热更新操作
使用HMR的好处
在修改的同时做到实时刷新，并且保留原来操作状态的痕迹
HMR的工作原理
graph TD
webpack采用watch监听某个文件-打包到内存中 --> webpack-dev-server和webpack交互-中间件webpack-dev-middleware监控代码通知webpack打包--> server监听静态文件-通知浏览器对应用live-reload进行浏览器刷新--> sockjs对浏览器和服务器建立websocket长链接-打包各阶段状态-server监听的文件变化-通过新模块的hash值进行模块热替换--> webpack/hot/dev-server是根据webpack-dev-server/client传的信息决定是刷新浏览器还是模块热更新-->HotModuleReplacement.runtime是客户端HMR的重要角色-接收上一步模块的hash值-向服务端发送Ajax请求-服务端返回json--> json里面包含了所有更新的hash值-再通过jsonp请求获取最新模块代码-->HotModulePlugin决定是否更新模块-检查依赖关系-更新的同时更新依赖关系-->HMR失败后从会live-reload-进行浏览器刷新获取最新打包的代码
对于HMR我有问题
为什吗在写CSS样式的时候会触发HMR的热更新，而在改动js还是会刷新页面呢？
因为样式文件通过loader处理，loader自处理了样式文件的热更新，就是样式文件更新后会覆盖之前的样式
js是没有规律的，它有可能会导出一个对象，一个字符串，一个数组或者函数，webpack无法处理更过后的模块，所以就没有办法去统一去做一套方案的热更新
可是vue、react不用手动操作js也可以做到热更新呀 因为他们基于框架，在框架下面是有规律的，举个🌰，在react里面每个文件都必须导出一个函数或者一个类，所以就有了统一的规律，集成了HMR
今天不学太多，每天一点点🤏🏻
