文章插圖

文章插圖
我們大致了解了webpack HMR 原理 。可以看出以下幾點核心思想：
【webpack中熱更新的方法特性 關于Webpack中熱更新的方法特性,以下說法不正確的是?】1、監聽文件變化
2、服務器與客戶端通信
3、替換流程
4、降級操作
當然，由于 webpack 本身有個很成熟的模塊思想和生態，因此整個架構設計會比我們實現的 HMR 復雜很多 。在模塊熱替換中，是由 webpack 的全部流程出力來完成這一操作的，而并沒有局限于 webpack-dev-server 和 webpack 以及業務代碼本身，實際上，起到更重要作用的是各類 loader，它們需要使用 HMR API 來實現 Hot Reload 的邏輯，決定什么時候注冊模塊、什么時候卸載模塊；如何注冊和卸載模塊 。而 webpack 本身更像是一個調用方的角色，不需要考慮具體的注冊和反注冊邏輯 。
HMR 的核心組織
經過了上面的分析，我們基本上確認了一個思路，也就是分析 webpack HMR 得出的結論 。但是由于我們只有 runtime，所以實現 Hot Reload 變成了一個下圖的簡單流程：
1、Server 啟動一個 HTTP 服務器，并且注冊和啟動 WebSocket 服務，用于屆時與客戶端通信
2、在啟動 Static 服務器后返回頁面前注入 HMR 的客戶端代碼，業務方無需關心 HMR 的具體實現和添加對應的支持代碼服務端監聽磁盤文件的變更，將文件變更通過 WebSocket 發送給客戶端
3、客戶端收到文件變更消息后進行對應的模塊處理
4、（模塊處理失敗，降級為 Live Reload）
live reload?
在實現 HMR 之前，我們可以先實現一個簡單的 Live Reload 來保證我們 1-3 步的實現沒有異常 。
const Koa = require('koa')const WebSocket = require('ws')const chokidar = require('chokidar')const app = new Koa()const fs = require('fs').promisesconst wss = new WebSocket.Server({ port: 8000 })const dir = './static'const watcher = chokidar.watch('./static', { ignored: /node_modules|.git|[/\]./})wss.on('connection', (ws) => { watcher .on('add', path => console.log(`File ${path} added`)) .on('change', path => console.log(`File ${path} has been changed`)) .on('unlink', path => console.log(`File ${path} has been moved`)) .on('all', async (event, path) => { // Simple Live Reload ws.send('reload') }) ws.on('message', (message) => { console.log('received: %s', message) }) ws.send('HMR Client is Ready')})const injectedData = http://www.mnbkw.com/jxjc/176389/`