webpack热模块替换（HMR）/热更新的方法

2023年6月11日上午9:56 • JavaScript

Webpack热模块替换（HMR）是一种优化开发工作流的技术，可以在运行时修改代码，而无需刷新页面。这样可以提高我们的开发效率和体验。以下是Webpack热模块替换的详细攻略：

什么是Webpack热模块替换（HMR）/ 热更新？

热模块替换（HMR）是Webpack提供的一种能力，可以让我们在应用程序运行的时候，实现对代码的修改。这意味着我们可以在无需刷新整个页面的情况下，实时的看到所做的改变。这种能力不仅能够简化我们的开发工作流，也极大的提高了我们的生产力和体验。

如何启用Webpack热模块替换（HMR）/ 热更新？

为了启用Webpack热模块替换（HMR）/ 热更新，我们需要完成以下步骤：

配置Webpack的开发Server
在Webpack配置文件中启用HMR
可选：启用React热更新

配置Webpack的开发Server

首先，我们需要安装并配置Webpack的开发Server。Webpack自带了一个简单的Server，可以在开发时使用：

npm install webpack-dev-server --save-dev

Webpack的开发Server可以通过CLI命令行或者Webpack的配置文件配置。我们可以在package.json文件中添加一个启动的脚本：

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

然后，运行以下命令启动开发Server：

npm start

在Webpack配置文件中启用HMR

接下来，我们需要在Webpack配置文件中启用HMR。在Webpack中，启用HMR需要使用到两个插件：webpack.HotModuleReplacementPlugin和webpack.NamedModulesPlugin。

const webpack = require('webpack');

module.exports = {
  // ... 其他的Webpack配置
  devServer: {
    // ... 其他devServer配置
    hot: true    //启用HMR
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin()
  ]
};

这样，我们就启用了Webpack的HMR。

启用React热更新

如果你在使用React，还需要启用React热更新。

首先，要安装react-hot-loader到应用程序中：

npm install react-hot-loader --save-dev

接着，在入口文件中启用热更新：

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

const render = Component => {
  ReactDOM.render(
    <AppContainer>
      <Component />
    </AppContainer>,
    document.getElementById('root')
  );
};

render(App);

if (module.hot) {
  module.hot.accept('./App', () => {
    const NewApp = require('./App').default;
    render(NewApp);
  });
}

现在，我们的Webpack热模块替换已经启用，并支持React组件的热更新。

示例：启用Webpack热模块替换（HMR）/ 热更新

下面，我们通过两个实际的示例来演示如何启用Webpack热模块替换（HMR）/ 热更新。

示例1：在React应用程序中启用HMR

假设我们正在开发一个React应用程序，现在我们希望启用Webpack的HMR。首先，我们需要按照上述步骤，配置好Webpack的开发Server和HMR。

在React组件中，我们需要添加一个module的监听器，只要模块发生变化，就触发热更新。在src/index.js文件中，我们添加以下代码：

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

const render = Component => {
  ReactDOM.render(<Component />, document.getElementById('root'));
};

render(App);

if (module.hot) {
  module.hot.accept('./App', () => {
    const NewApp = require('./App').default;
    render(NewApp);
  });
}

现在，我们的React应用程序已经启用了Webpack的HMR，并且支持组件的热更新。

示例2：在jQuery应用程序中启用HMR

假设我们正在开发一个jQuery应用程序，现在我们希望启用Webpack的HMR。首先，我们需要按照上述步骤，配置好Webpack的开发Server和HMR。

现在，我们假设我们有一个jQuery组件在src/js/component.js中：

import $ from 'jquery';

export default function() {
  $('.label').click(function() {
    $(this).toggleClass('active');
  });
}

在src/js/index.js中，我们添加以下代码：

import component from './component';

component();

if (module.hot) {
  module.hot.accept('./component', function () {
    console.log('Component module has been updated.');
    component();
  })
}

现在，我们的jQuery应用程序已经启用了Webpack的HMR，并且支持组件的热更新。