webpack HMR（热替换）-原理篇之webpack-hot-middleware

前言：

1、webpack-hot-middleware 的作用是实现模块的热替换，一般和webpack-dev-middleware（WDM原理）配合使用。
2、热替换使用的是服务端推送技术EventSource（EventSource简介）

例子

例子编写看这里的PART2，或者直接下载来看github地址

正文

（这个图是我捋顺代码的图，可以忽略，下文不打算围绕着此图说明，有兴趣的可以看下）

WHM.png

示意图（图糙理不糙）：

WHM.png

WHM的组成：

WHM是由两部分组成，客户端和服务端。

客户端：

1、在webpack打包后的基础代码添加模块更新的逻辑：
（1）具体操作：通过在webpack.config.js中配置HotModuleReplacementPlugin插件实现。
（可以比较一下没有模块更新代码的webpack打包文件和配置了WHM后的打包文件，会比较明确webpack.HotModuleReplacementPlugin做了哪些工作）
（2）具体作用：
1）在打包后的webpackBootstrap基础代码部分，将webpackHotUpdate函数暴露到全局
2）提供热更新中最关键的两个函数hotCheck和hotApply。
2、将发送请求获得模块更新消息的代码和入口文件一起打包
（1）具体操作：通过在entry中添加webpack-hot-middleware/client实现
（2）具体作用：
1）创建EventSource对象，请求__webpack_hmr（默认），维持和服务端的长连接，服务端通过该连接将文件打包消息同步给浏览器。
2）判断服务端同步的消息，若为sync，进行后续更新操作
3）调用HotModuleReplacementPlugin提供的hotCheck和hotApply函数，里面包含请求.hot-update.json和.hot-update.js文件的逻辑。

服务端

1、注册插件钩子，主要在done钩子的回调将webpack打包后的信息保存到latestState里
2、通过长连接同步消息，无消息发送时，服务端发送心跳保持连接
3、当请求到来且lastestStats值存在时，服务端会给客户端发送一个sync消息，告诉客户端进行模块替换
4、用clients保存不同的客户端。

一些说明

1、hotCheck函数和hotApply的作用
(1)下载hot-update.js和hot-update.json两个文件
(2)决定更新哪个模块，并执行更新
2、curHash.hot-update.json的作用
（1）请求获得newHash值，将curHash赋值为newHash，根据hash是否有变化决定更新
（2）获得变化模块的编号
3、curHash.hot-update.js的作用
（1）包含了调用webpackHotUpdate的代码，HotModuleReplacementPlugin暴露webpackHotUpdate函数就是为了可以执行模块更新的代码。
（2）包含了变化模块的代码

－－－－－－－

小题外大意味：

模拟替换模块的例子，例糙理不糙：

index.html:

  
  
  
    click to update
    

    
    
  

t1.js:

window['UpdateSelf'] = function(string) {
  document.getElementById("app").innerHTML = string;
}

var app = document.getElementById("app");
app.innerHTML = "Hello World";

update.js:

UpdateSelf("Hi Change");

解释一下这个例子为啥粗糙的模拟了热替换的过程：
（1）t1.js模拟打包后的文件app.bundle.js，里面的UpdateSelf跟WHM中webpackHotUpdate起的一样的作用。
（2）点击按钮时，请求update.js进行模块替换。这个过程模拟 客户端收到服务端的sync消息时，请求更新模块文件hot-update.js的过程。
结合这个例子，再结合前面叙述的客户端的作用，对更新的过程会清晰一些。