Webpack 模块热更新 HMR 原理和使用-JavaScript中文网-JavaScript教程资源分享门户

Webpack 是前端开发中非常流行的打包工具，它可以将多个模块打包成一个文件，方便前端开发和部署。而模块热更新 HMR 则是 Webpack 中非常重要的功能，可以让我们在修改代码时不需要刷新页面，即可看到修改后的效果，大大提高了开发效率。

HMR 原理

在了解 HMR 的使用方法之前，我们先来了解一下 HMR 的原理。当我们修改了某个模块的代码后，Webpack 会通过 WebSocket 和浏览器建立一个连接，将修改后的代码发送给浏览器。浏览器接收到代码后，会通过 Webpack 的 HMR runtime 将代码更新到页面上。整个过程如下图所示：

在这个过程中，HMR runtime 起到了非常重要的作用。它会监听服务器推送的新模块代码，然后通过一系列的处理，将新的模块代码更新到页面上。

HMR 使用方法

了解了 HMR 的原理之后，我们来看一下如何在 Webpack 中使用 HMR。

首先，我们需要在 Webpack 配置文件中开启 HMR 功能。在 webpack.config.js 中添加以下代码：

// javascriptcn.com 代码示例
const webpack = require('webpack');

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

其中，devServer.hot 表示开启 HMR 功能，plugins 中的 webpack.HotModuleReplacementPlugin() 则是 Webpack 内置的插件，用于启用 HMR 功能。

接着，在我们的入口文件中添加以下代码：

if (module.hot) {
  module.hot.accept('./app.js', function() {
    // 当 app.js 模块更新时，执行此回调函数
  });
}

这段代码的作用是监听 app.js 模块的变化，当该模块发生变化时，执行回调函数中的代码。

最后，在 package.json 中添加以下代码：

{
  "scripts": {
    "start": "webpack-dev-server --mode=development --open"
  }
}

这段代码的作用是启动 Webpack 开发服务器，开启 HMR 功能。

现在，我们就可以在项目中使用 HMR 了。当我们修改了 app.js 中的代码时，浏览器会自动刷新，显示新的代码效果。而在使用 HMR 的情况下，我们只需要修改 app.js 中的代码，页面就会自动更新，无需刷新页面，提高了开发效率。

示例代码

以下是一个使用 HMR 的示例代码：

// javascriptcn.com 代码示例
// app.js
import printMessage from './message';

printMessage('Hello, World!');

if (module.hot) {
  module.hot.accept('./message.js', function() {
    console.log('message.js 模块已更新');
    printMessage('Hello, World!');
  });
}

// message.js
export default function printMessage(message) {
  console.log(message);
}

在上面的代码中，我们在 app.js 中引入了 message.js 模块，并在页面上打印出了 Hello, World!。接着，我们监听了 message.js 模块的变化，当该模块发生变化时，控制台会输出 message.js 模块已更新，并重新打印出 Hello, World!。

总结

通过本文的介绍，我们了解了 Webpack 模块热更新 HMR 的原理和使用方法。在实际的项目开发中，使用 HMR 可以大幅提高开发效率，让我们更加快速地开发出高质量的前端应用。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/655dcddfd2f5e1655d81661d