webpack--概念9--模块热替换

1：简单介绍

模块热替换（HMR-hot module replacement）功能会在应用程序运行过程中替换，添加，删除模块。二无需重新加载整个页面；主要通过以下几种方式来显著加快开发速度
（1）保留在完全重新加载页面时丢失的应用程序状态
（2）只更新变更内容，以节省宝贵的开发时间
（3）调整样式更加快速，几乎相当于在浏览器调试器中更改样式

2：HMR的工作原理

让我们从不同角度出发
1：在应用程序中
通过以下步骤，可以做到在应用程序中置换（swap in and out）模块
（1）应用程序代码要求HMR runtime检查更新
（2）HMR runtime（异步）下载更新，然后通过应用程序代码
（3）应用程序代码要求HMR runtime应用更新
（4）HMR runtime（异步）应用更新；
你可以设置HMR，使进程自动触发更新，或者你可以选择要求在用户交互时进行更新；
2：在编译器中
除了普通资环，编译器（compiler）需要发出update，允许更新之前的版本到新的版本，update由2部分构成
（1）更新后的manifest（json）
（2）一个或者多个更新后的chunk（js）
manifest包括新的编译hash和所有的待更新chunk目录。每个更新chunk都含有对应于此chunk的全部更新模块的代码；编译器确保模块ID和chunk iD在这些构建之间保持一致；通常将这些ID存贮在内存中，但是有可能将他们存储在一个json文件中；
3：在模块中
HMR是可选功能，只会影响包含HMR代码的模块；举个例子来说，通过style-loader为style样式追加；为了运行追加补丁，style-loader实现了HMR接口；当他通过HMR接收到更新，会使用新样式替换原来的样式；类似的，当在一个模块中实现了HMR接口，你可以描述出当模块被更新后发生了什么，然而在多数情况下，不需要强制在每个模块中HMR代码；如果一个模块没有HMR处理函数，更新就会冒泡；这意味着一个简单的处理函数能够对整个模块树进行更新；如果在这个模块树中，一个单独的模块被更新，那么整租依赖模块都会被重新加载；
4：在HMR runtime中
对于模块系统的runtime，附加的代码被发送到parents和children跟踪模块。在管理方面，runtime支持2个方法check和apply；
check发送http请求来更新manifest；如果请求失败，说明没有更新可用；如果请求成功，待更新chunk会和当前加载过额chunk进行比较；对每个加载过的chunk会下载相对应的待更新chunk。当所有待更新chunk完成下载，就会准备切换到ready状态；
apply方法将所有被更新模块标记为无效；对于每个无效模块，都需要在模块中有一个更新处理函数。或者在它的父级模块们中有更新处理函数。否则，无效标记冒泡，并也是父级无效。每个冒泡继续指导到达应用程序入口起点，或者到达带有更新处理函数的模块（以最新达到为准），如果它从入口起点开始冒泡。则这个过程失败；
之后所有无效模块都通过dispose处理函数处理和解除接在。然后更新当前hash，并且调动所有accept处理函数。runtime切换回闲置状态，一切照常继续；