面试题：Webpack开发环境配置中如何实现热模块替换（HMR）

实现HMR的基本步骤

启用HMR：在Webpack配置文件（通常是webpack.config.js）中，设置devServer.hot为true，开启热模块替换功能。例如：

module.exports = {
  // 其他配置项
  devServer: {
    hot: true
  }
};

入口文件处理：在入口JavaScript文件（通常是index.js）中，接受HMR更新。对于React应用，可以使用react - hot - loader，对于Vue应用，Vue CLI默认已经配置好相关接受更新逻辑。以原生JavaScript为例，可以使用如下代码：

if (module.hot) {
  module.hot.accept((err) => {
    if (err) {
      console.error('HMR update failed:', err);
    }
  });
}

模块接受更新处理：在需要热更新的模块中，定义如何接受更新。例如在一个utils.js模块中：

export function add(a, b) {
  return a + b;
}

if (module.hot) {
  module.hot.accept(() => {
    console.log('utils module updated');
  });
}

需要安装和配置的相关插件或loader

webpack - dev - server：它是实现热模块替换的关键工具，用于启动开发服务器。通过npm或yarn安装：

npm install webpack - dev - server --save - dev
# 或者
yarn add webpack - dev - server --dev

在Webpack配置文件中配置：

module.exports = {
  // 其他配置项
  devServer: {
    // 配置开发服务器相关选项，如端口、代理等
    port: 3000,
    contentBase: './dist'
  }
};

@pmmmwh/react - hot - loader（针对React应用）：用于React应用实现热模块替换。安装：

npm install @pmmmwh/react - hot - loader --save - dev
# 或者
yarn add @pmmmwh/react - hot - loader --dev

在Webpack配置中，需要配置babel - loader以支持react - hot - loader，例如：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel - loader',
            options: {
              presets: ['@babel/preset - react'],
              plugins: ['@pmmmwh/react - hot - loader/babel']
            }
          }
        ]
      }
    ]
  }
};

在入口文件（如index.js）中引入：

import React from'react';
import ReactDOM from'react - dom';
import {App} from './App';
import {hot} from'react - hot - loader/root';

const HotApp = hot(App);

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

if (module.hot) {
  module.hot.accept();
}

vue - loader（针对Vue应用）：Vue CLI默认已经配置好HMR相关设置，vue - loader在构建Vue应用时，会自动处理热模块替换相关逻辑。如果是手动配置Webpack构建Vue应用，需要安装vue - loader及相关依赖：

npm install vue - loader vue - template - compiler --save - dev
# 或者
yarn add vue - loader vue - template - compiler --dev

并在Webpack配置文件中配置：

const VueLoaderPlugin = require('vue - loader/lib/plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue - loader'
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
};

星途面试题库

面试题：Webpack开发环境配置中如何实现热模块替换（HMR）

知识考点

面试题答案

实现HMR的基本步骤

需要安装和配置的相关插件或loader