Webpack5学习之Hot Module Replacement

2023-09-18 16:13:44

Webpack 5的HMR工作原理

Webpack 5的HMR功能是基于文件监听和WebSocket通信实现的。当我们启动Webpack的开发服务器时，它会启动一个WebSocket服务器，并在后台持续监听项目代码文件是否有发生变化。一旦检测到有文件改动，Webpack 5会立即触发重新编译打包的过程。编译完成后，Webpack 5会通过WebSocket服务器向客户端发送更新信息，客户端收到更新信息后会自动刷新页面，展示最新的编译结果。

Webpack 5的HMR使用流程

安装Webpack 5和相关依赖项
在Webpack配置文件中启用HMR功能
在代码中引入HMR相关的代码
启动Webpack的开发服务器
在浏览器中打开项目页面
当代码发生改动时，Webpack 5会自动重新编译打包并刷新页面，展示最新的编译结果

Webpack 5的HMR配置方式

在Webpack配置文件中，我们可以通过以下方式启用HMR功能：

module.exports = {
  devServer: {
    hot: true,
  },
};

在代码中，我们可以通过以下方式引入HMR相关的代码：

// webpack.config.js
const webpack = require("webpack");

module.exports = {
  devServer: {
    hot: true,
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
  ],
};

// main.js
import { hot } from "webpack/hot/dev-server";

hot.accept();

console.log("Hello, world!");