如何实现 webpack hot module replacement？

前言

Webpack 是一个强大的前端构建工具，它可以将多个 JavaScript 文件打包成一个或多个 bundle，还可以处理图片、样式等资源文件。但是，在开发过程中，每次修改代码都需要重新打包，这会浪费大量时间。为了解决这个问题，Webpack 提供了一个非常实用的功能：热模块替换（Hot Module Replacement，简称 HMR）。

HMR 可以在不刷新页面的情况下，实现对代码的修改和实时预览。它不仅可以提高开发效率，还可以减少出错的可能性。本文将介绍如何实现 Webpack HMR。

步骤

1. 安装依赖

首先，需要安装相关依赖：

npm install --save-dev webpack-dev-server webpack-hot-middleware

其中，webpack-dev-server 是用于启动开发服务器的工具，webpack-hot-middleware 是用于实现 HMR 的工具。

2. 配置 webpack

在 webpack.config.js 中，需要添加如下配置：

const webpack = require('webpack');
const path = require('path');

module.exports = {
  entry: {
    app: './src/index.js',
    vendor: ['react', 'react-dom']
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin()
  ],
  devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
    hot: true
  }
};

其中，entry 表示入口文件，output 表示输出文件，module 表示处理模块的规则，plugins 表示插件，devServer 表示开发服务器的配置。

注意，webpack-dev-server 需要设置 hot 为 true，才能开启 HMR 功能。

3. 配置 express

在项目根目录下，创建一个 server.js 文件，添加如下代码：

const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware');
const config = require('./webpack.config.js');

const app = express();
const compiler = webpack(config);

app.use(webpackDevMiddleware(compiler, {
  publicPath: config.output.publicPath
}));

app.use(webpackHotMiddleware(compiler));

app.listen(3000, function () {
  console.log('App listening on port 3000!\n');
});

其中，webpackDevMiddleware 和 webpackHotMiddleware 分别用于处理 Webpack 的编译和 HMR 功能。

4. 编写代码

在 src/index.js 中，添加如下代码：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

if (module.hot) {
  module.hot.accept('./App', () => {
    const NextApp = require('./App').default;
    ReactDOM.render(<NextApp />, document.getElementById('root'));
  });
}

其中，module.hot.accept 表示监听 App 组件的修改，并在修改后重新渲染组件。

5. 运行项目

在命令行中输入以下命令：

node server.js

然后，在浏览器中访问 http://localhost:3000，即可看到应用程序运行的界面。接着，修改 src/App.js 中的代码，保存后，可以看到修改后的界面，无需刷新页面。

总结

通过以上步骤，我们成功地实现了 Webpack 的 HMR 功能。HMR 不仅可以提高开发效率，还可以减少出错的可能性。希望本文对您有所帮助。

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