面试题：Webpack 热模块替换（HMR）的原理及自定义实现

Webpack HMR 工作原理剖析

开发服务器端：
- Webpack 在开发模式下启动时，会监听文件系统的变化。当某个模块文件发生改变，Webpack 会重新编译该模块及其依赖。
- 编译完成后，Webpack 不会刷新整个页面，而是通过 HMR 服务器将新模块的信息（如模块的 id、更新后的代码等）通过 WebSocket 发送给客户端。
客户端：
- 客户端运行时，HMR 客户端代码会通过 WebSocket 连接到 HMR 服务器，持续监听模块更新的消息。
- 当收到更新消息时，HMR 客户端会尝试去应用这些更新。它首先检查是否可以直接热替换该模块，如果可以，就会用新模块替换旧模块，同时处理模块之间的依赖关系，使得应用能够在不刷新页面的情况下，呈现出更新后的效果。如果无法热替换（比如模块结构发生重大变化等），则可能会选择刷新页面。

自定义 HMR 实现思路

文件监听：在服务器端使用文件系统的监听 API（如 Node.js 中的 fs.watch 或 chokidar），来监听项目文件的变化。
模块编译：当文件变化时，使用类似 Babel 等工具对文件进行编译，生成浏览器可识别的代码。
通信机制：在服务器端和客户端之间建立通信通道，例如使用 WebSocket。服务器端将更新的模块信息发送给客户端。
客户端更新：客户端收到更新信息后，解析并替换相应的模块，更新页面展示。

关键技术点

模块标识：为每个模块分配唯一的标识，方便在更新时准确找到对应的模块。
依赖管理：跟踪模块之间的依赖关系，确保在更新模块时，其依赖模块也能正确处理。
代码替换：在客户端实现高效的代码替换逻辑，避免影响页面的正常运行。

简要代码结构

服务器端（Node.js 示例）：

const http = require('http');
const WebSocket = require('ws');
const fs = require('fs');
const path = require('path');
const chokidar = require('chokidar');

const server = http.createServer((req, res) => {
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.end('<html><body><script src="/ws.js"></script></body></html>');
});

const wss = new WebSocket.Server({ server });

// 监听文件变化
const watcher = chokidar.watch('.', {
    ignored: /(^|[\/\\])\../,
    persistent: true
});

watcher.on('change', (path) => {
    // 这里进行模块编译，简单示例假设只处理.js 文件
    if (path.endsWith('.js')) {
        const moduleCode = fs.readFileSync(path, 'utf8');
        // 这里可以使用 Babel 等进行编译
        const moduleId = path;
        const updateMessage = { type: 'update', moduleId, code: moduleCode };
        wss.clients.forEach((client) => {
            if (client.readyState === WebSocket.OPEN) {
                client.send(JSON.stringify(updateMessage));
            }
        });
    }
});

server.listen(3000, () => {
    console.log('Server running on port 3000');
});

客户端（JavaScript 示例）：

const socket = new WebSocket('ws://localhost:3000');

socket.addEventListener('message', (event) => {
    const data = JSON.parse(event.data);
    if (data.type === 'update') {
        const { moduleId, code } = data;
        // 假设已经有模块加载和替换逻辑
        const existingModule = window.moduleRegistry[moduleId];
        if (existingModule) {
            // 替换模块代码
            existingModule.code = code;
            // 重新执行模块相关逻辑以更新页面
            existingModule.execute();
        }
    }
});

以上代码结构仅为简单示意，实际实现中还需要处理更多细节，如模块依赖解析、错误处理等。

星途面试题库

面试题：Webpack 热模块替换（HMR）的原理及自定义实现

知识考点

面试题答案

Webpack HMR 工作原理剖析

自定义 HMR 实现思路

关键技术点

简要代码结构