webpack的热更新又称热替换（Hot Module Replacement），缩写为HMR。 这个机制可以做到不用刷新浏览器而将新变更的模块替换掉旧的模块。

  1. 在webpack的watch模式下，webpack监听文件系统中文件变化，根据配置文件对模块重新打包
  2. webpack-dev-middleware 调用 webpack 暴露的 API对代码变化进行监控，并且告诉 webpack，将代码打包到内存中。
  3. webpack-dev-server监控文件变化，然后通过sockjs在浏览器端和服务端之间建立一个 websocket 长连接，将 webpack 编译打包的各个阶段的状态信息，监控到的文件变化，以及最主要的新模块的hash值告知浏览器端(webpack/hot/dev-server)。
  4. webpack/hot/dev-server 的工作就是根据 webpack-dev-server/client 传给它的信息以及 dev-server 的配置决定是刷新浏览器呢还是进行模块热更新。
  5. HotModuleReplacement.runtime通过webpack/hot/dev-server传递过来的新模块的hash值，它通过 JsonpMainTemplate.runtime 向 server 端发送 ajax 请求，服务端返回一个 json，该 json 包含了所有要更新的模块的 hash 值，获取到更新列表后，该模块再次通过 jsonp 请求，获取到最新的模块代码。
  6. HotModulePlugin 将会对新旧模块进行对比，决定是否更新模块，在决定更新模块后，检查模块之间的依赖关系，更新模块的同时更新模块间的依赖引用。
  7. 当 HMR 失败后，回退到 live reload 操作，也就是进行浏览器刷新来获取最新打包代码。

参考文章

关于webpack的面试题