剖析 Webpack 自带的 HMR 实现原理-JavaScript中文网-JavaScript教程资源分享门户

前言

在前端开发中，我们经常需要修改代码，然后刷新浏览器才能看到修改的效果，这样的开发效率非常低下。为了解决这个问题，Webpack 提供了热模块替换（Hot Module Replacement，简称 HMR）功能，可以让我们在修改代码时，无需刷新浏览器，就能立即看到修改后的效果。本文将剖析 Webpack 自带的 HMR 实现原理，以及如何在项目中使用 HMR。

HMR 实现原理

HMR 的实现原理可以概括为四个步骤：

Webpack 监听文件变化，当文件发生变化时，Webpack 会重新编译这些文件；
Webpack 通过 WebSocket 把编译后的代码发送到浏览器；
浏览器接收到代码后，通过 webpack-dev-server/client 模块将代码注入到页面中；
注入代码后，浏览器会执行模块的 HMR 接口，根据模块是否支持 HMR，进行模块的热替换。

如何使用 HMR

使用 HMR 需要在 Webpack 配置文件中进行配置，具体的配置如下：

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

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  devServer: {
    contentBase: './dist'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
};

其中，需要添加 webpack.HotModuleReplacementPlugin 插件，这个插件会在编译时生成一个 JSONP 模块，用于更新模块代码。

在代码中，我们需要使用 module.hot.accept 方法来监听模块的变化，当模块发生变化时，我们可以执行相应的操作，如重新渲染页面等。下面是一个简单的示例代码：

// javascriptcn.com 代码示例
import './style.css';

function component() {
  const element = document.createElement('div');

  element.innerHTML = 'Hello, World!';
  element.classList.add('hello');

  return element;
}

document.body.appendChild(component());

if (module.hot) {
  module.hot.accept('./style.css', function() {
    console.log('CSS updated');
  });

  module.hot.accept(function() {
    console.log('JS updated');
  });
}

在上面的代码中，我们监听了 style.css 和 JS 模块的变化，当模块发生变化时，会输出相应的信息。

总结

本文剖析了 Webpack 自带的 HMR 实现原理，并给出了如何在项目中使用 HMR 的示例代码。使用 HMR 可以大大提高前端开发效率，让我们可以更快地看到代码的修改效果，提高开发体验。

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