Webpack 模块热替换 (HMR) 原理

Webpack 是前端开发中非常常用的构建工具，它能够将多个文件打包成一个或多个文件，让前端项目打包输出更加高效并且易于维护。而在开发过程中，由于浏览器中的页面和 JavaScript 是单向的，每一次代码更新都需要重新构建整个项目，这个过程非常浪费时间。因此，Webpack 最新的版本引入了 HMR 技术，能够在不刷新浏览器的前提下，使部分代码的更新立即生效。本文将详细介绍 Webpack 模块热替换（HMR）的原理和使用方法。

HMR 原理

HMR 技术的原理是在浏览器和服务器之间建立一个 WebSocket 长连接，当代码发生变化时，服务器会将新的代码通过这个连接传送到浏览器端，浏览器端会将新的代码替换掉旧的代码，同时保留评估状态等变量信息。

在 Webpack4 之前，HMR 技术只能通过 webpack-dev-server 配合 webpack 实现，而在 Webpack4 之后，由于 webpack-dev-server 实现的 HMR 已经固化成独立模块 webpack-hot-middleware，因此，HMR 能够像其他插件一样，直接通过配置文件引入，无需引入 webpack-dev-server。

HMR 使用方法

下面是一个使用 HMR 技术的简单示例，需要通过 webpack.config.js 配置文件实现：

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

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'HMR',
      template: './public/index.html'
    }),
    new webpack.HotModuleReplacementPlugin()
  ],
  devServer: {
    contentBase: './dist',
    hot: true
  }
};

需要使用到热替换的部分是 devServer 对象，形如 {hot: true}，同时在 plugins 中添加 new webpack.HotModuleReplacementPlugin() 插件，以此来开启 HMR 功能。

最后在 js 文件中添加如下代码：

if (module.hot) {
  module.hot.accept('./src/index.js', function() {
    console.log('Accepting the updated index.js module!');
  })
}

这段代码的含义是当 index.js 代码发生变化时，输出 Accepting the updated index.js module!，从而证明代码已经生效。

总结

通过以上的介绍，我们了解了 HMR 技术的原理和使用方法，HMR 技术的引入可以让我们在开发过程中减少构建时间，从而提高前端开发效率。当然，还有其他的优化手段，比如代码分割、tree-shaking、懒加载等等，我们也会在后续的文章中进行讲解。

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