文章插图

文章插图
我们大致了解了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/`