热模块替换实现与原理

1.作用

用于在开发过程中，实时预览修改后的页面，无需重新加载整个页面。
其主要通过一下几种方式来加快开发速度：

保留在完全重新加载页面时丢失的应用程序状态。
只更新变更内容，以节省宝贵的开发时间。
调整样式更加快速 - 几乎相当于在浏览器调试器中更改样式。

2.更新流程

核心概念：

entry： 入口文件
module：模块，webpack里一切皆模块，一个模块对应一个文件
chunk：代码块，对应多个module。
loader：模块转换器，用于模块内容的转换。
plugin：插件，在构建流程中监听特定的事件来做一些处理。

流程：

• 修改了一个或多个文件。
• 文件系统接收更改并通知Webpack。
• Webpack重新编译构建一个或多个模块，并通知HMR服务器进行了更新。
• HMR Server使用websockets通知HMR Runtime需要更新。（HMR运行时通过HTTP请求这些更新。）
• HMR运行时再替换更新中的模块。

其中：
在热更新开启后，当webpack打包时，会向client端注入一段HMR runtime代码，同时server端会启动了一个HMR服务器，然后通过websocket和注入的runtime进行通信。
在webpack检测到文件修改后，会重新构建，并通过ws向client端发送更新消息，浏览器通过jsonp拉取更新过的模块，回调触发模块热更新逻辑。

主要更新流程如下图：

compile: 是webpack进行编译过程。
hmr-server: 建立连接并完成模块热更新的推送。
hmr-runtime: 运行时注入到bundle.js中的代码。

当模块启用了HMR时，其流程如下图:

文字描述：

• webpack 监听到文件的修改
• 根据配置信息，打包编译，且依赖webpack-dev-middleware实现打包结果在内存中。
• webpack-dev-server初始化sockjs（一种模拟webScoket的技术），监听”webpack-dev-server”;webpack-hot-middleware初始化eventSource（与服务器发起连接的对象），监听”webpack-hot-middleware”
• 监听到修改后，发送消息给客户端
• 对应的client监听到修改后执行modul.hot.check
• HotModuleReplacement.runtime执行check事件，请求manifest文件，获取需要更新的模块
• 执行module.hot.apply来进行更新

其中：

1. webpack-dev-middleware：是一个容器，它的作用是将webpack处理后的文件传递给server（webpack-dev-middleware 依赖于memory-fs，它将 webpack 原本的 outputFileSystem 替换成了MemoryFileSystem 实例，这样webpack编译的结果是放置在内存中而不是直接生成文件）。webpack-dev-server也是通过webpack-dev-middleware实现，同时，webpack-dev-middleware本身可以作为一个单独的包来使用。

2. webpack-hot-middleware：实现热更新必须使用webpack-hot-middleware插件，该插件通过webpack的HMR API，浏览器和服务器之间建立连接并接收更新。它只专注于webpack和浏览器之间的通信机制。

3. accept函数：接受指定依赖项的代码更新，依赖的模块更新后回调函数被调用，如下表示接受特定moduleID的更新。
   语法：