面试题：Webpack 中的模块热替换原理及配置

Question

请阐述 Webpack 模块热替换（HMR）的原理，并说明在 Webpack 配置文件中如何进行基本的 HMR 配置。

Answer 1

Webpack 模块热替换（HMR）原理

1. 建立 WebSocket 连接：Webpack 开发服务器（webpack-dev-server 或 webpack-dev-middleware）在启动时会创建一个 WebSocket 服务器，客户端（浏览器）与该服务器建立连接。这样服务器和客户端之间就可以进行双向通信。
2. 文件变化监听：Webpack 持续监控项目中的文件变化。一旦检测到文件发生更改，Webpack 会重新编译发生变化的模块。
3. 模块增量更新：Webpack 不会重新加载整个页面，而是将发生变化的模块进行增量更新。它会生成新的模块代码，并通过 WebSocket 发送到客户端。
4. 客户端 HMR 运行时：客户端的 HMR 运行时接收到更新消息后，会尝试将新的模块代码替换掉旧的模块代码。如果替换成功，页面就会在不刷新的情况下呈现出更新后的效果。如果替换失败，HMR 运行时可能会选择刷新整个页面。

在 Webpack 配置文件中进行基本 HMR 配置

1. 使用 webpack - dev - server：
   • 安装 webpack - dev - server：

     npm install webpack - dev - server --save - dev
     

   • 在 webpack.config.js 中配置：

   const path = require('path');
   
   module.exports = {
       entry: './src/index.js',
       output: {
           path: path.resolve(__dirname, 'dist'),
           filename: 'bundle.js'
       },
       devServer: {
           contentBase: path.join(__dirname, 'dist'),
           hot: true // 开启 HMR
       }
   };
   

2. 使用 webpack - dev - middleware：
   • 安装 webpack - dev - middleware：

     npm install webpack - dev - middleware --save - dev
     

   • 在自定义服务器（如基于 Express 的服务器）中使用：

   const express = require('express');
   const webpack = require('webpack');
   const webpackDevMiddleware = require('webpack - dev - middleware');
   const config = require('./webpack.config.js');
   const compiler = webpack(config);
   
   const app = express();
   app.use(webpackDevMiddleware(compiler, {
       publicPath: config.output.publicPath,
       hot: true // 开启 HMR
   }));
   
   const port = 3000;
   app.listen(port, () => {
       console.log(`Server running on port ${port}`);
   });
   

3. 在入口文件中接受 HMR 更新（可选但推荐）：
   • 在入口 JavaScript 文件（如 src/index.js）中，可以添加如下代码来更好地处理 HMR 更新：

   if (module.hot) {
       module.hot.accept(() => {
           // 这里可以添加当模块热替换时的逻辑，比如重新渲染部分组件等
           console.log('Module HMR update');
       });
   }