聊聊Webpack热更新以及原理

什么是热更新

模块热替换(hot module replacement 或 HMR)是 webpack 提供的最有用的功能之一。它允许在运行时更新所有类型的模块，而无需完全刷新

站在用户的角度思考问题，与客户深入沟通，找到四川网站设计与四川网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：成都做网站、网站设计、企业官网、英文网站、手机端网站、网站推广、域名注册、网站空间、企业邮箱。业务覆盖四川地区。

一般的刷新我们分两种：

  •  一种是页面刷新，不保留页面状态，就是简单粗暴，直接 window.location.reload()。
  •  另一种是基于 WDS (Webpack-dev-server) 的模块热替换，只需要局部刷新页面上发生变化的模块，同时可以保留当前的页面状态，比如复选框的选中状态、输入框的输入等。

可以看到相比于第一种，热更新对于我们的开发体验以及开发效率都具有重大的意义

HMR 作为一个 Webpack 内置的功能，可以通过 HotModuleReplacementPlugin 或 --hot 开启。

具体我们如何在 webpack 中使用这个功能呢？

热更新的使用以及简单分析

如何使用热更新

 
 
 
 
    
  
  
  
  
  1. npm install webpack webpack-dev-server --save-dev
    2.

设置 HotModuleReplacementPlugin，HotModuleReplacementPlugin 是 webpack 是自带的

 
 
 
 
    
  
  
  
  
  1. plugins: { 
    2. 
  
  
  
  
  2.     HotModuleReplacementPlugin: new webpack.HotModuleReplacementPlugin() 
    3. 
  
  
  
  
  3. }
    4.

再设置一下 devServer

 
 
 
 
    
  
  
  
  
  1. devServer: { 
    2. 
  
  
  
  
  2.     contentBase: path.resolve(__dirname, 'dist'), 
    3. 
  
  
  
  
  3.     hot: true, // 重点关注 
    4. 
  
  
  
  
  4.     historyApiFallback: true, 
    5. 
  
  
  
  
  5.     compress: true 
    6. 
  
  
  
  
  6. }
    7.
  •  hot 为 true，代表开启热更新

两个重要的文件

当我们改变我们项目的文件的时候，比如我修改 Vue 的一个 方法：

更改前：

 
 
 
 
    
  
  
  
  
  1. clickMe() { 
    2. 
  
  
  
  
  2.   console.log('我是 Gopal，欢迎关注「前端杂货铺」'); 
    3. 
  
  
  
  
  3. }
    4.

更改后：

 
 
 
 
    
  
  
  
  
  1. clickMe() { 
    2. 
  
  
  
  
  2.   console.log('我是 Gopal，欢迎关注「前端杂货铺」，一起学习成长吧'); 
    3. 
  
  
  
  
  3. }
    4.

浏览器会去请求两个文件

接下来我们看看这两个文件：

  •  JSON 文件，h 代表本次新生成的 Hash 值为 0c256052432b51ed32c8——本次输出的 Hash 值会被作为下次热更新的标识。c 表示当前要热更新的文件对应的是哪个模块，可以让 webpack 知道它要更新哪个模块
 
 
 
 
    
  
  
  
  
  1. { 
    2. 
  
  
  
  
  2.     "h": "0c256052432b51ed32c8", 
    3. 
  
  
  
  
  3.     "c": { 
    4. 
  
  
  
  
  4.         "201": true 
    5. 
  
  
  
  
  5.     } 
    6. 
  
  
  
  
  6. }
    7.
  •  js 文件，就是本次修改的代码，重新编译打包后的，大致是下面这个样子（已删减一些并格式化过，这里看不懂没关系的，就记住是返回要更新的模块就好了），webpackHotUpdate 方法就是用来更新模块的，201 对应的是哪个模块（我们称它为模块标识），其他的就是要更新的模块的内容了
 
 
 
 
    
  
  
  
  
  1. webpackHotUpdate(201, { 
    2. 
  
  
  
  
  2.   "./src/views/moveTransfer/list/index.vue?vue&type=script&lang=js&": function ( 
    3. 
  
  
  
  
  3.     module, 
    4. 
  
  
  
  
  4.     exports, 
    5. 
  
  
  
  
  5.     __webpack_require__
    6. 
  
  
  
  
  6.   ) { 
    7. 
  
  
  
  
  7.     "use strict"; 
    8. 
  
  
  
  
  8.     var _Object$defineProperty = __webpack_require__( 
    9. 
  
  
  
  
  9.       /*! @babel/runtime-corejs3/core-js-stable/object/define-property */ "./node_modules/@babel/runtime-corejs3/core-js-stable/object/define-property.js" 
    10. 
  
  
  
  
  10.     ); 
    11. 
  
  
  
  
  11.     _Object$defineProperty(exports, "__esModule", { 
    12. 
  
  
  
  
  12.       value: true, 
    13. 
  
  
  
  
  13.     }); 
    14. 
  
  
  
  
  14.     exports.default = void 0; 
    15. 
  
  
  
  
  15.     var _default = { 
    16. 
  
  
  
  
  16.       data: function data() { 
    17. 
  
  
  
  
  17.         return {}; 
    18. 
  
  
  
  
  18.       }, 
    19. 
  
  
  
  
  19.       computed: {}, 
    20. 
  
  
  
  
  20.       methods: { 
    21. 
  
  
  
  
  21.         clickMe: function clickMe() { 
    22. 
  
  
  
  
  22.           console.log("我是 Gopal，欢迎关注「前端杂货铺」，一起学习成长吧"); 
    23. 
  
  
  
  
  23.         }, 
    24. 
  
  
  
  
  24.       }, 
    25. 
  
  
  
  
  25.     }; 
    26. 
  
  
  
  
  26.     exports.default = _default; 
    27. 
  
  
  
  
  27.   }, 
    28. 
  
  
  
  
  28. });
    29.

那么问题来了，我修改了文件，浏览器是怎么知道要更新的呢？

了解一下 Websocket

热更新使用到了 Websocket，这里不会细讲 Websocket，可以看下阮一峰老师的 WebSocket 教程，下面是一个 简单的例子

 
 
 
 
    
  
  
  
  
  1. // 执行上面语句之后，客户端就会与服务器进行连接。 
    2. 
  
  
  
  
  2. var ws = new WebSocket("wss://echo.websocket.org"); 
    3. 
  
  
  
  
  3. // 实例对象的 onopen 属性，用于指定连接成功后的回调函数 
    4. 
  
  
  
  
  4. ws.onopen = function(evt) {  
    5. 
  
  
  
  
  5.   console.log("Connection open ...");  
    6. 
  
  
  
  
  6.   ws.send("Hello WebSockets!"); 
    7. 
  
  
  
  
  7. };  
    8. 
  
  
  
  
  8. // 实例对象的 onmessage 属性，用于指定收到服务器数据后的回调函数。可以接受二进制数据，blob 对象或者 Arraybuffer 对象 
    9. 
  
  
  
  
  9. ws.onmessage = function(evt) { 
    10. 
  
  
  
  
  10.   console.log( "Received Message: " + evt.data); 
    11. 
  
  
  
  
  11.   ws.close(); 
    12. 
  
  
  
  
  12. }; 
    13. 
  
  
  
  
  13. // 实例对象的 onclose 属性，用于指定连接关闭后的回调函数。 
    14. 
  
  
  
  
  14. ws.onclose = function(evt) { 
    15. 
  
  
  
  
  15.   console.log("Connection closed."); 
    16. 
  
  
  
  
  16. };      
    17.

上面通过 new Websocket 创建一个客户端与服务端通信的实例，并通过 onmessage属性，接受指定服务器返回的数据，并进行相应的处理。

这里大概解释下，为什么是 Websocket ？因为 Websocket 是一种双向协议，它最大的特点就是 服务器可以主动向客户端推送消息，客户端也可以主动向服务器发送信息。这是 HTTP 不具备的，热更新实际上就是服务器端的更新通知到客户端，所以选择了 Websocket

接下来让我们进一步的讨论关于热更新的原理

热更新原理

热更新的过程

几个重要的概念（这里有一个大致的概念就好，后面会把它们串起来）：

  •  Webpack-complier ：webpack 的编译器，将 JavaScript 编译成 bundle（就是最终的输出文件）
  •  HMR Server：将热更新的文件输出给 HMR Runtime
  •  Bunble Server：提供文件在浏览器的访问，也就是我们平时能够正常通过 localhost 访问我们本地网站的原因
  •  HMR Runtime：开启了热更新的话，在打包阶段会被注入到浏览器中的 bundle.js，这样 bundle.js 就可以跟服务器建立连接，通常是使用 websocket ，当收到服务器的更新指令的时候，就   去更新文件的变化
  •  bundle.js：构建输出的文件

启动阶段

文件经过 Webpack-complier 编译好后传输给 Bundle Server，Bundle Server 可以让浏览器访问到我们打包出来的文件

下面流程图中的 1、2、A、B阶段

文件热更新阶段

文件经过 Webpack-complier 编译好后传输给 HMR Server，HMR Server 知道哪个资源(模块)发生了改变，并通知 HMR Runtime 有哪些变化（也就是上面我们看到的两个请求），HMR Runtime 就会更新我们的代码，这样我们浏览器就会更新并且不需要刷新

下面流程图的 1、2、3、4、5 阶段

参考 19 | webpack中的热更新及原理分析

深入——源码阅读

我们还看回上图，其中启动阶段图中的 1、2、A、B阶段就不讲解了，主要看热更新阶段主要讲 3、4 和 5 阶段

在开始接下开的阅读前，我们再回到最初的问题上我本地修改了文件，浏览器是怎么知道要更新的呢？

通过上面的流程图，其实我们可以猜测，本地实际上启动了一个 HMR Server 服务，而且在启动 Bundle Server 的时候已经往我们的 bundle.js 中注入了 HMR Runtime(主要用来启动 Websocket，接受 HMR Server 发来的变更)

所以我们聚焦以下几点：

  •  Webpack 如何启动了 HMR Server
  •  HMR Server 如何跟 HMR Runtime 进行通信的
  •  HMR Runtime 接受到变更之后，如何生效的

以下的源码解析分别对应的版本是：

  •  webpack——5.24.3
  •  webpack-dev-server——4.0.0-beta.0
  •  webpack-dev-middleware——4.1.0

启动 HMR Server

这个工作主要是在 webpack-dev-server 中完成的

看 lib/Server.js setupApp 方法，下面的 express 服务实际上对应的是 Bundle Server

 
 
 
 
    
  
  
  
  
  1. setupApp() { 
    2. 
  
  
  
  
  2.   // Init express server 
    3. 
  
  
  
  
  3.   // eslint-disable-next-line new-cap 
    4. 
  
  
  
  
  4.   // 初始化 express 服务 
    5. 
  
  
  
  
  5.   // 使用 express 框架启动本地 server，让浏览器可以请求本地的静态资源。 
    6. 
  
  
  
  
  6.   this.app = new express(); 
    7. 
  
  
  
  
  7. }
    8.

启动服务结束之后就通过 createSocketServer 创建 websocket 服务

 
 
 
 
    
  
  
  
  
  1. listen(port, hostname, fn) { 
    2. 
  
  
  
  
  2.   this.hostname = hostname; 
    3. 
  
  
  
  
  3.   return ( 
    4. 
  
  
  
  
  4.     findPort(port || this.options.port)
    5. 
  
  
  
  
  5.       .then((port) => { 
    6. 
  
  
  
  
  6.         this.port = port; 
    7. 
  
  
  
  
  7.         return this.server.listen(port, hostname, (err) => { 
    8. 
  
  
  
  
  8.           if (this.options.hot || this.options.liveReload) { 
    9. 
  
  
  
  
  9.             // 启动 express 服务之后，启动 websocket 服务 
    10. 
  
  
  
  
  10.             this.createSocketServer(); 
    11. 
  
  
  
  
  11.           } 
    12. 
  
  
  
  
  12.         }); 
    13. 
  
  
  
  
  13.       }) 
    14. 
  
  
  
  
  14.   ); 
    15. 
  
  
  
  
  15. } 
    16. 
 
 
 
 
 
 
 
 
    
  
  
  
  
  1. createSocketServer() { 
    2. 
  
  
  
  
  2.   this.socketServer = new this.SocketServerImplementation(this); 
    3. 
  
  
  
  
  3.   this.socketServer.onConnection((connection, headers) => {  
    4. 
  
  
  
  
  4.   }); 
    5. 
  
  
  
  
  5. }
    6.

HMR Server 和 HMR Runtime 的通信

首先要通信的第一个问题在于——通信的时机，什么时候我去通知客户端我的文件更新。通过 webpack 创建的 compiler 实例（监听本地文件的变化、文件改变自动编译、编译输出），可以往 compiler.hooks.done 钩子（代表 webpack 编译完之后触发）注册事件， 当监听到一次 webpack 编译结束，就会调用 sendStats 方法

看 lib/Server.js 中的 setupHooks 方法

 
 
 
 
    
  
  
  
  
  1. // lib/Server.js 
    2. 
  
  
  
  
  2. // 绑定监听事件 
    3. 
  
  
  
  
  3. setupHooks() { 
    4. 
  
  
  
  
  4.   // ... 
    5. 
  
  
  
  
  5.   const addHooks = (compiler) => { 
    6. 
  
  
  
  
  6.     // 监听 webpack 的 done 钩子，tapable 提供的监听方法 
    7. 
  
  
  
  
  7.     // done 标识编译结束 
    8. 
  
  
  
  
  8.     const { compile, invalid, done } = compiler.hooks; 
    9. 
  
  
  
  
  9.     compile.tap('webpack-dev-server', invalidPlugin); 
    10. 
  
  
  
  
  10.     invalid.tap('webpack-dev-server', invalidPlugin);
    11. 
  
  
  
  
  11.     done.tap('webpack-dev-server', (stats) => { 
    12. 
  
  
  
  
  12.       // 当监听到一次webpack编译结束，就会调用 sendStats 方法 
    13. 
  
  
  
  
  13.       this.sendStats(this.sockets, this.getStats(stats)); 
    14. 
  
  
  
  
  14.       this.stats = stats; 
    15. 
  
  
  
  
  15.     }); 
    16. 
  
  
  
  
  16.   }; 
    17. 
  
  
  
  
  17. }
    18.

当监听到一次 webpack 编译结束，就会调用 sendStats 方法，里面会向客户端发送 hash 和 ok 事件

 
 
 
 
    
  
  
  
  
  1. // lib/Server.js 
    2. 
  
  
  
  
  2. // send stats to a socket or multiple sockets 
    3. 
  
  
  
  
  3. sendStats(sockets, stats, force) { 
    4. 
  
  
  
  
  4.   // ok和 hash 
    5. 
  
  
  
  
  5.   this.sockWrite(sockets, 'hash', stats.hash);
    6. 
  
  
  
  
  6.   if (stats.errors.length > 0) { 
    7. 
  
  
  
  
  7.     this.sockWrite(sockets, 'errors', stats.errors); 
    8. 
  
  
  
  
  8.   } else if (stats.warnings.length > 0) { 
    9. 
  
  
  
  
  9.     this.sockWrite(sockets, 'warnings', stats.warnings); 
    10. 
  
  
  
  
  10.   } else { 
    11. 
  
  
  
  
  11.     this.sockWrite(sockets, 'ok'); 
    12. 
  
  
  
  
  12.   }
    13. 
  
  
  
  
  13. }
    14.

在 client-src/default/index.js 中，会去更新 hash，并且在 ok 的时候去进行检查更新 reloadApp

 
 
 
 
    
  
  
  
  
  1. // client-src/default/index.js  
    2. 
  
  
  
  
  2. const onSocketMessage = { 
    3. 
  
  
  
  
  3.   // 更新 current Hash 
    4. 
  
  
  
  
  4.   hash(hash) {
    5. 
  
  
  
  
  5.      status.currentHash = hash; 
    6. 
  
  
  
  
  6.   }, 
    7. 
  
  
  
  
  7.   'progress-update': function progressUpdate(data) { 
    8. 
  
  
  
  
  8.     if (options.useProgress) { 
    9. 
  
  
  
  
  9.       log.info(`${data.percent}% - ${data.msg}.`); 
    10. 
  
  
  
  
  10.     } 
    11. 
  
  
  
  
  11.     sendMessage('Progress', data); 
    12. 
  
  
  
  
  12.   }, 
    13. 
  
  
  
  
  13.   ok() { 
    14. 
  
  
  
  
  14.     sendMessage('Ok'); 
    15. 
  
  
  
  
  15.     if (options.useWarningOverlay || options.useErrorOverlay) { 
    16. 
  
  
  
  
  16.       overlay.clear(); 
    17. 
  
  
  
  
  17.     } 
    18. 
  
  
  
  
  18.     if (options.initial) { 
    19. 
  
  
  
  
  19.       return (options.initial = false); 
    20. 
  
  
  
  
  20.     } 
    21. 
  
  
  
  
  21.     // 进行更新检查等操作 
    22. 
  
  
  
  
  22.     reloadApp(options, status); 
    23. 
  
  
  
  
  23.   } 
    24. 
  
  
  
  
  24. };
    25.

接下来我们看看 client-src/default/utils/reloadApp.js 中的 reloadApp。这里又利用 node.js 的 EventEmitter，发出webpackHotUpdate 消息。这里又将更新的事情给回了 webpack（为了更好的维护代码，以及职责划分的更明确。）

 
 
 
 
    
  
  
  
  
  1. function reloadApp( 
    2. 
  
  
  
  
  2.   { hotReload, hot, liveReload }, 
    3. 
  
  
  
  
  3.   { isUnloading, currentHash } 
    4. 
  
  
  
  
  4. ) { 
    5. 
  
  
  
  
  5.   // ... 
    6. 
  
  
  
  
  6.   if (hot) { 
    7. 
  
  
  
  
  7.     log.info('App hot update...'); 
    8. 
  
  
  
  
  8.     //  hotEmitter 其实就是 EventEmitter 的实例 
    9. 
  
  
  
  
  9.     const hotEmitter = require('webpack/hot/emitter'); 
    10. 
  
  
  
  
  10.     // 又利用 node.js 的 EventEmitter，发出 webpackHotUpdate 消息。 
    11. 
  
  
  
  
  11.     // websocket 仅仅用于客户端（浏览器）和服务端进行通信。而真正做事情的活还是交回给了 webpack。
    12. 
  
  
  
  
  12.     hotEmitter.emit('webpackHotUpdate', currentHash); 
    13. 
  
  
  
  
  13.     if (typeof self !== 'undefined' && self.window) { 
    14. 
  
  
  
  
  14.       // broadcast update to window 
    15. 
  
  
  
  
  15.       self.postMessage(`webpackHotUpdate${currentHash}`, '*'); 
    16. 
  
  
  
  
  16.     }
    17. 
  
  
  
  
  17.   } 
    18. 
  
  
  
  
  18.   // ... 
    19. 
  
  
  
  
  19. } 
    20. 
  
  
  
  
  20. module.exports = reloadApp;
    21.

在 webpack 的 hot/dev-server.js 中，监听 webpackHotUpdate 事件，并执行 check 方法。并在 check 方法中调用 module.hot.check 方法进行热更新。

 
 
 
 
    
  
  
  
  
  1. // hot/dev-server.js 
    2. 
  
  
  
  
  2. // 监听webpackHotUpdate事件 
    3. 
  
  
  
  
  3. hotEmitter.on("webpackHotUpdate", function (currentHash) { 
    4. 
  
  
  
  
  4.   lastHash = currentHash; 
    5. 
  
  
  
  
  5.   if (!upToDate() && module.hot.status() === "idle") { 
    6. 
  
  
  
  
  6.     log("info", "[HMR] Checking for updates on the server..."); 
    7. 
  
  
  
  
  7.     check(); 
    8. 
  
  
  
  
  8.   } 
    9. 
  
  
  
  
  9. }); 
    10. 
 
 
 
 
 
 
 
 
    
  
  
  
  
  1. var check = function check() { 
    2. 
  
  
  
  
  2.   //  moudle.hot.check 开始热更新 
    3. 
  
  
  
  
  3.   // 之后的源码都是HotModuleReplacementPlugin塞入到bundle.js中的哦，我就不写文件路径了 
    4. 
  
  
  
  
  4.   module.hot 
    5. 
  
  
  
  
  5.     .check(true) 
    6. 
  
  
  
  
  6.     .then(function (updatedModules) { 
    7. 
  
  
  
  
  7.       // ... 
    8. 
  
  
  
  
  8.     }) 
    9. 
  
  
  
  
  9.     .catch(function (err) { 
    10. 
  
  
  
  
  10.       // ... 
    11. 
  
  
  
  
  11.     }); 
    12. 
  
  
  
  
  12. };
    13.

至于 module.hot.check ，实际上通过 HotModuleReplacementPlugin 已经注入到我们 chunk 中了（也就是我们上面所说的 HMR Runtime），所以后面就是它是如何更新 bundle.js 的呢？

HMR Runtime 中更新 bundle.js

如果我们仔细看我们的打包后的文件的话，开启热更新之后生成的代码会比不开启多出很多东西（为了更加直观看到，可以将其输出到本地），这些就是帮助 webpack 在浏览器端去更新 bundle.js 的 HMR Runtime 代码

来看打包后的代码中新增了一个 createModuleHotObject

 
 
 
 
    
  
  
  
  
  1. module.hot = createModuleHotObject(options.id, module);
    2.

实际上这个函数就是用来返回一个 hot 对象，所以调用 module.hot.check 的时候，实际上就是执行 hotCheck 函数

 
 
 
 
    
  
  
  
  
  1. function createModuleHotObject(moduleId, me) { 
    2. 
  
  
  
  
  2.   var hot = { 
    3. 
  
  
  
  
  3.     // Module API 
    4. 
  
  
  
  
  4.     addDisposeHandler: function (callback) { 
    5. 
  
  
  
  
  5.       hot._disposeHandlers.push(callback); 
    6. 
  
  
  
  
  6.     }, 
    7. 
  
  
  
  
  7.     removeDisposeHandler: function (callback) { 
    8. 
  
  
  
  
  8.       var idx = hot._disposeHandlers.indexOf(callback); 
    9. 
  
  
  
  
  9.       if (idx >= 0) hot._disposeHandlers.splice(idx, 1); 
    10. 
  
  
  
  
  10.     }, 
    11. 
  
  
  
  
  11.     // Management API 
    12. 
  
  
  
  
  12.     check: hotCheck, 
    13. 
  
  
  
  
  13.     apply: hotApply, 
    14. 
  
  
  
  
  14.     status: function (l) { 
    15. 
  
  
  
  
  15.       if (!l) return currentStatus;
    16. 
  
  
  
  
  16.       registeredStatusHandlers.push(l); 
    17. 
  
  
  
  
  17.     }, 
    18. 
  
  
  
  
  18.     addStatusHandler: function (l) { 
    19. 
  
  
  
  
  19.       registeredStatusHandlers.push(l);
    20. 
  
  
  
  
  20.      }, 
    21. 
  
  
  
  
  21.     removeStatusHandler: function (l) { 
    22. 
  
  
  
  
  22.       var idx = registeredStatusHandlers.indexOf(l); 
    23. 
  
  
  
  
  23.       if (idx >= 0) registeredStatusHandlers.splice(idx, 1); 
    24. 
  
  
  
  
  24.     },
    25. 
  
  
  
  
  25.   }; 
    26. 
  
  
  
  
  26.   currentChildModule = undefined; 
    27. 
  
  
  
  
  27.   return hot; 
    28. 
  
  
  
  
  28. }
    29.

其中就有 hotCheck 中调用了 __webpack_require__.hmrM

 
 
 
 
    
  
  
  
  
  1. function hotCheck(applyOnUpdate) { 
    2. 
  
  
  
  
  2.   setStatus("check"); 
    3. 
  
  
  
  
  3.     return __webpack_require__.hmrM().then(function (update) { 
    4. 
  
  
  
  
  4.   } 
    5. 
  
  
  
  
  5. }
    6.

__webpack_require__.hmrM——加载.hot-update.json

来看 __webpack_require__.hmrM, 其中 __webpack_require__.p 指的是我们本地服务的域名，类似 http://0.0.0.0:9528 ， 另外 __webpack_require__.hmrF 去获取 .hot-update.json 文件的地址，就是我们之前提到的重要文件之一

 
 
 
 
    
  
  
  
  
  1. __webpack_require__.hmrM = () => { 
    2. 
  
  
  
  
  2.   if (typeof fetch === "undefined") throw new Error("No browser support: need fetch API"); 
    3. 
  
  
  
  
  3.   return fetch(__webpack_require__.p + __webpack_require__.hmrF()).then((response) => {
    4. 
  
  
  
  
  4.      if(response.status === 404) return; // no update available 
    5. 
  
  
  
  
  5.     if(!response.ok) throw new Error("Failed to fetch update manifest " + response.statusText); 
    6. 
  
  
  
  
  6.     return response.json(); 
    7. 
  
  
  
  
  7.   }); 
    8. 
  
  
  
  
  8. }; 
    9. 
 
 
 
 
 
 
 
 
    
  
  
  
  
  1. /* webpack/runtime/get update manifest filename */ 
    2. 
  
  
  
  
  2. (() => { 
    3. 
  
  
  
  
  3.   __webpack_require__.hmrF = () => ("main." + __webpack_require__.h() + ".hot-update.json"); 
    4. 
  
  
  
  
  4. })();
    5.

加载要更新的模块

下面来看如何加载我们要更新的模块的，可以看到打包出来的代码中有 loadUpdateChunk

 
 
 
 
    
  
  
  
  
  1. function loadUpdateChunk(chunkId) { 
    2. 
  
  
  
  
  2.   return new Promise((resolve, reject) => { 
    3. 
  
  
  
  
  3.     var url = __webpack_require__.p + __webpack_require__.hu(chunkId); 
    4. 
  
  
  
  
  4.     // create error before stack unwound to get useful stacktrace later 
    5. 
  
  
  
  
  5.     var error = new Error();
    6. 
  
  
  
  
  6.     var loadingEnded = (event) => { 
    7. 
  
  
  
  
  7.       // ...加载后的处理 
    8. 
  
  
  
  
  8.     };
    9. 
  
  
  
  
  9.      __webpack_require__.l(url, loadingEnded); 
    10. 
  
  
  
  
  10.   }); 
    11. 
  
  
  
  
  11. }
    12.

再来看 __webpack_require__.l，主要通过类似 JSONP 的方式进行，因为JSONP获取的代码可以直接执行。

 
 
 
 
    
  
  
  
  
  1. __webpack_require__.l = (url, done, key, chunkId) => { 
    2. 
  
  
  
  
  2.   // ... 
    3. 
  
  
  
  
  3.   if (!script) {
    4. 
  
  
  
  
  4.      script = document.createElement("script"); 
    5. 
  
  
  
  
  5.     script.charset = "utf-8"; 
    6. 
  
  
  
  
  6.     script.timeout = 120; 
    7. 
  
  
  
  
  7.     if (__webpack_require__.nc) { 
    8. 
  
  
  
  
  8.       script.setAttribute("nonce", __webpack_require__.nc); 
    9. 
  
  
  
  
  9.     } 
    10. 
  
  
  
  
  10.     script.setAttribute("data-webpack", dataWebpackPrefix + key); 
    11. 
  
  
  
  
  11.     script.src = url;
    12. 
  
  
  
  
  12.    } 
    13. 
  
  
  
  
  13.   // ... 
    14. 
  
  
  
  
  14.   needAttach && document.head.appendChild(script);
    15. 
  
  
  
  
  15. };
    16.

还记得我们一开始提到的返回的 JS 中就是一个 webpackHotUpdate 函数么？实际上在我们的 HMR Runtime 中就是全局定义了（下面的名称是 webpackHotUpdatelearn_hot_reload，应该是 webpack 版本不一样导致的，不影响理解）至于生成的代码是如何生效的，请移步我的另外一篇文章——【Webpack 进阶】Webpack 打包后的代码是怎样的？

 
 
 
 
    
  
  
  
  
  1. // webpackHotUpdate + 项目名 
    2. 
  
  
  
  
  2. self["webpackHotUpdatelearn_hot_reload"] = (chunkId, moreModules, runtime) => { 
    3. 
  
  
  
  
  3.   for(var moduleId in moreModules) { 
    4. 
  
  
  
  
  4.     if(__webpack_require__.o(moreModules, moduleId)) { 
    5. 
  
  
  
  
  5.       currentUpdate[moduleId] = moreModules[moduleId]; 
    6. 
  
  
  
  
  6.       if(currentUpdatedModulesList) currentUpdatedModulesList.push(moduleId); 
    7. 
  
  
  
  
  7.     } 
    8. 
  
  
  
  
  8.   } 
    9. 
  
  
  
  
  9.   if(runtime) currentUpdateRuntime.push(runtime); 
    10. 
  
  
  
  
  10.   if(waitingUpdateResolves[chunkId]) { 
    11. 
  
  
  
  
  11.     waitingUpdateResolves[chunkId](); 
    12. 
  
  
  
  
  12.     waitingUpdateResolves[chunkId] = undefined; 
    13. 
  
  
  
  
  13.   } 
    14. 
  
  
  
  
  14. };
    15.

所以，客户端接受到服务器端推动的消息后，如果需要热更新，浏览器发起 http 请求去服务器端获取新的模块资源解析并局部刷新页面

以上整体的流程如下所示：

总结

本文介绍了 webpack 热更新的简单使用、相关的流程以及原理。小结一下，webpack 如果开启了热更新的时候

  •  HMR Runtime 通过 HotModuleReplacementPlugin 已经注入到我们 chunk 中了
  •  除了开启一个 Bundle Server，还开启了 HMR Server，主要用来和 HMR Runtime 中通信
  •  在编译结束的时候，通过 compiler.hooks.done，监听并通知客户端
  •  客户端接收到之后，就会调用 module.hot.check 等，发起 http 请求去服务器端获取新的模块资源解析并局部刷新页面

网站栏目：聊聊Webpack热更新以及原理
网页地址：http://www.36103.cn/qtweb/news41/5741.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

网站制作知识

分类信息网站

手机网站制作　　 　成都服务器托管　　 　移动服务器托管　　 　四川艾名斯　　 　雕琢时光茶叶　　 　绵阳服务器托管　　 　光华服务器托管　　 　bgp多线机房托管　　 　微信小程序　　 　香港云空间　　 　网站推广　　 　成都app开发　　 　成都企业网站设计　　 　微信小程序开发　　 　特丽尔硅藻泥　　 　高端网站建设　　 　app软件开发　　 　眉山电信机房　　 　成都小程序开发　　 　亚克力背部发光字