webpack热更新的实现原理？

webpack的热更新又称热替换(Hot Module Replacement)，缩写为HMR。这个机制可以做到不用刷新浏览器而将新变更的模块替换掉旧的模块。
原理：
图片:
首先要知道server端和client端都做了处理工作：

1. 第一步，在webpack的watch模式下，文件系统中某一个文件发生修改，webpack监听到文件变化，根据配置文件对模块重新编译打包，并将打包后的代码通过简单的JavaScript对象保存在内存中。
2. 第二步，是webpack-dev-server和webpack之间的接口交互，而在这一步，主要是dev-server的中间件webpack-dev-middleware和webpack之间的交互，webpack-dev-middleware调用webpack暴露的API对代码变化进行监控，并且告诉webpack，将代码打包到内存中。
3. 第三步是webpack-dev-server对文件变化的一个监控，这一步不同于第一步，并不是监控代码变化重新打包。当我们在配置文件中配置了devServer.watchContentBase为true的时候，server会监听这些配置文件夹中静态文件的变化，变化后会通知浏览器对应用进行live reload。注意这儿是浏览器刷新，和HMR是两个概念。
4. 第四步也是webpack-dev-server代码的工作，该步骤主要是通过sockjs（webpack-dev-server的依赖）在浏览器端和服务端之间建立一个websocket长链接，将webpack编译打包的各个阶段的状态信息告知浏览器端，同时也包括第三步中server监听静态文件变化的信息。浏览器根据这些socket消息进行不同的操作。当然服务端传递的最主要信息还是新面孔的hash值，后面的步骤根据这一hash值来进行模块热替换。
5. webpack-dev-server/client端并不能够请求更新的代码，也不会执行热更新模块操作，而把这些工作又交回给了webpack，webpack/hot/dev-server的工作就是根据webpack-dev-server/client传给它的信息以及dev-server的配置决定是刷新浏览器呐还是进行模块热更新。当然如果仅仅是刷新浏览器，也就没有后面那些步骤了。
6. HotModlueReplacement.runtime是客户端HMR的中枢，它接收到上一步传递给他的新模块的hash值，它通过JsonPMainTemplate.runtime向server端发送ajax请求，服务端返回一个json，该json包含了所有要更新的模块的hash值，获取到更新列表后，该模块再次通过jsonp请求，获取到最新的模块代码。这就是上图中7、8、9步骤。
7. 而第10步是决定HMR成功与否的关键步骤，在该步骤中，HotModulePlugin将会对新旧模块进行对比，决定是否更新模块，在决定更新模块后，检查模块之间的依赖关系，更新模块的同时更新模块间的依赖引用。
8. 最后一步，当HMR失败后，回退到live reload操作，也就是进行浏览器刷新来获取最新打包代码。