5.浏览器端发布消息

当 hash 消息发送完成后，socket 还会发送一条 ok 的消息告知 Webpack-dev-server，由于客户端（Client）并不请求热更新代码，也不执行热更新模块操作，因此通过 emit 一个 "webpackHotUpdate" 消息，将工作转交回 Webpack。

//webpack-dev-server\client\index.js
//1.处理ok消息Line135
varonSocketMsg={
//...
ok:functionok(){
sendMsg('Ok');
if(useWarningOverlay||useErrorOverlay)overlay.clear();
if(initial)returninitial=false;//eslint-disable-lineno-return-assign
reloadApp();
},
//...
}

//2.处理刷新APPLine218
functionreloadApp(){
//...
if(_hot){
//动态加载emitter
varhotEmitter=require('webpack/hot/emitter');
hotEmitter.emit('webpackHotUpdate',currentHash);
if(typeofself!=='undefined'&&self.window){
//broadcastupdatetowindow
self.postMessage('webpackHotUpdate'+currentHash,'*');
}
}
//...
}

6.传递 hash 到 HMR

Webpack/hot/dev-server 监听浏览器端 webpackHotUpdate 消息，将新模块 hash 值传到客户端 HMR 核心中枢的 HotModuleReplacement.runtime ，并调用 check 方法检测更新，判断是浏览器刷新还是模块热更新。如果是浏览器刷新的话，则没有后续步骤咯~~

//webpack\hot\dev-server.js
//1.监听webpackHotUpdateLine42
varhotEmitter=require("./emitter");
hotEmitter.on("webpackHotUpdate",function(currentHash){
lastHash=currentHash;
if(!upToDate()&&module.hot.status()==="idle"){
log("info","[HMR]Checkingforupdatesontheserver...");
check();
}
});

varcheck=functioncheck(){
module.hot.check(true).then(function(updatedModules){
if(!updatedModules){
//...
window.location.reload();//浏览器刷新
return;
}
if(!upToDate()){
check();
}
}).catch(function(err){/*...*/});
};

//webpack\lib\HotModuleReplacement.runtime.js
//3.调用HotModuleReplacement.runtime定义的check方*L法**ine167
functionhotCheck(apply){
if(hotStatus!=="idle")thrownewError("check()isonlyallowedinidlestatus");
hotApplyOnUpdate=apply;
hotSetStatus("check");
returnhotDownloadManifest(hotRequestTimeout).then(function(update){
//...
});
}

7.检测是否存在更新

当 HotModuleReplacement.runtime 调用 check 方法时，会调用 JsonpMainTemplate.runtime 中的 hotDownloadUpdateChunk （获取最新模块代码）和 hotDownloadManifest （获取是否有更新文件）两个方法，这两个方法的源码，在下一步展开。

//webpack\lib\HotModuleReplacement.runtime.js
//1.调用HotModuleReplacement.runtime定义hotDownloadUpdateChunk方*L法**ine171
functionhotCheck(apply){
if(hotStatus!=="idle")thrownewError("check()isonlyallowedinidlestatus");
hotApplyOnUpdate=apply;
hotSetStatus("check");
returnhotDownloadManifest(hotRequestTimeout).then(function(update){
//...
{
//hotEnsureUpdateChunk方法中会调用hotDownloadUpdateChunk
hotEnsureUpdateChunk(chunkId);
}
});
}

其中 hotEnsureUpdateChunk 方法中会调用 hotDownloadUpdateChunk ：

//webpack\lib\HotModuleReplacement.runtime.jsLine215
functionhotEnsureUpdateChunk(chunkId){
if(!hotAvailableFilesMap[chunkId]){
hotWaitingFilesMap[chunkId]=true;
}else{
hotRequestedFilesMap[chunkId]=true;
hotWaitingFiles++;
hotDownloadUpdateChunk(chunkId);
}
}

8.请求更新最新文件列表

在调用 check 方法时，会先调用 JsonpMainTemplate.runtime 中的 hotDownloadManifest 方法，通过向服务端发起 AJAX 请求获取是否有更新文件，如果有的话将 mainfest 返回给浏览器端。

了不起的WebpackHMR学习指南（下）「含源码讲解」

这边涉及一些原生 XMLHttpRequest，就不全部贴出了~

//webpack\lib\JsonpMainTemplate.runtime.js
//hotDownloadManifest定义Line22
functionhotDownloadManifest(requestTimeout){
returnnewPromise(function(resolve,reject){
try{
varrequest=newXMLHttpRequest();
varrequestPath=$require$.p+$hotMainFilename$;
request.open("GET",requestPath,true);
request.timeout=requestTimeout;
request.send(null);
}catch(err){
returnreject(err);
}
request.onreadystatechange=function(){
//...
};
});
}

9.请求更新最新模块代码

在 hotDownloadManifest 方法中，还会执行 hotDownloadUpdateChunk 方法，通过 JSONP 请求最新的模块代码，并将代码返回给 HMR runtime 。

了不起的WebpackHMR学习指南（下）「含源码讲解」

然后 HMR runtime 会将新代码进一步处理，判断是浏览器刷新还是模块热更新。

//webpack\lib\JsonpMainTemplate.runtime.js
//hotDownloadManifest定义Line12
functionhotDownloadUpdateChunk(chunkId){
//创建script标签，发起JSONP请求
varhead=document.getElementsByTagName("head")[0];
varscript=document.createElement("script");
script.type="text/javascript";
script.charset="utf-8";
script.src=$require$.p+$hotChunkFilename$;
$crossOriginLoading$;
head.appendChild(script);
}

10.更新模块和疫赖引用

这一步是整个模块热更新（HMR）的核心步骤，通过 HMR runtime 的 hotApply 方法，移除过期模块和代码，并添加新的模块和代码实现热更新。

从 hotApply 方法可以看出，模块热替换主要分三个阶段：

找出过期模块 outdatedModules 和过期疫赖 outdatedDependencies；

//webpack\lib\HotModuleReplacement.runtime.js
//找出outdatedModules和outdatedDependenciesLine342
functionhotApply(){
//...
varoutdatedDependencies={};
varoutdatedModules=[];
functiongetAffectedStuff(updateModuleId){
varoutdatedModules=[updateModuleId];
varoutdatedDependencies={};
//...
return{
type:"accepted",
moduleId:updateModuleId,
outdatedModules:outdatedModules,
outdatedDependencies:outdatedDependencies
};
};
functionaddAllToSet(a,b){
for(vari=0;i<b.length;i++){
varitem=b[i];
if(a.indexOf(item)<0)
a.push(item);
}
}
for(varidinhotUpdate){
if(Object.prototype.hasOwnProperty.call(hotUpdate,id)){
//...省略多余代码
if(hotUpdate[id]){
result=getAffectedStuff(moduleId);
}
if(doApply){
for(moduleIdinresult.outdatedDependencies){
//添加到outdatedDependencies
addAllToSet(outdatedDependencies[moduleId],result.outdatedDependencies[moduleId]);
}
}
if(doDispose){
//添加到outdatedModules
addAllToSet(outdatedModules,[result.moduleId]);
appliedUpdate[moduleId]=warnUnexpectedRequire;
}
}
}
}

从缓存中删除过期模块、疫赖和所有子元素的引用；

//webpack\lib\HotModuleReplacement.runtime.js
//从缓存中删除过期模块、依赖和所有子元素的引用Line442
functionhotApply(){
//...
varidx;
varqueue=outdatedModules.slice();
while(queue.length>0){
moduleId=queue.pop();
module=installedModules[moduleId];
//...
//移除缓存中的模块
deleteinstalledModules[moduleId];
//移除过期依赖中不需要使用的处理方法
deleteoutdatedDependencies[moduleId];
//移除所有子元素的引用
for(j=0;j<module.children.length;j++){
varchild=installedModules[module.children[j]];
if(!child)continue;
idx=child.parents.indexOf(moduleId);
if(idx>=0){
child.parents.splice(idx,1);
}
}
}
//从模块子组件中删除过时的依赖项
vardependency;
varmoduleOutdatedDependencies;
for(moduleIdinoutdatedDependencies){
if(Object.prototype.hasOwnProperty.call(outdatedDependencies,moduleId)){
module=installedModules[moduleId];
if(module){
moduleOutdatedDependencies=outdatedDependencies[moduleId];
for(j=0;j<moduleOutdatedDependencies.length;j++){
dependency=moduleOutdatedDependencies[j];
idx=module.children.indexOf(dependency);
if(idx>=0)module.children.splice(idx,1);
}
}
}
}
}

将新模块代码添加到 modules 中，当下次调用 __webpack_require__ (webpack 重写的 require 方法)方法的时候，就是获取到了新的模块代码了。

//webpack\lib\HotModuleReplacement.runtime.js
//将新模块代码添加到modules中Line501
functionhotApply(){
//...
for(moduleIdinappliedUpdate){
if(Object.prototype.hasOwnProperty.call(appliedUpdate,moduleId)){
modules[moduleId]=appliedUpdate[moduleId];
}
}
}

hotApply 方法执行之后，新代码已经替换旧代码，但是我们业务代码并不知道这些变化，因此需要通过 accept事件通知应用层使用新的模块进行“局部刷新”，我们在业务中是这么使用：

if(module.hot){
module.hot.accept('./library.js',function(){
//使用更新过的library模块执行某些操作...
})
}

11.热更新错误处理

在热更新过程中，hotApply 过程中可能出现 abort 或者 fail 错误，则热更新退回到刷新浏览器（Browser Reload），整个模块热更新完成。

//webpack\hot\dev-server.jsLine13
module.hot.check(true).then(function(updatedModules){
if(!updatedModules){
returnwindow.location.reload();
}
//...
}).catch(function(err){
varstatus=module.hot.status();
if(["abort","fail"].indexOf(status)>=0){
window.location.reload();
}
});

五、总结

本文主要和大家分享 Webpack 的 HMR 使用和实现原理及源码分析，在源码分析中，通过一张“Webpack HMR 工作原理解析”图让大家对 HMR 整个工作流程有所了解，HMR 本身源码内容较多，许多细节之处本文没有完整写出，需要各位读者自己慢慢阅读和理解源码。

了不起的 Webpack HMR 学习指南（下）「含源码讲解」

目录