webpack热更新的玩法

前端

2024-01-09 14:10:55

webpack热更新，也可以称为热替换，英文缩写「HMR」(Hot Module Replacement)，是webpack的一个功能，可以让web项目在开发环境下，每次更改文件后无需重刷浏览器，即可看见更改的效果。

webpack热更新的原理

webpack热更新的原理是通过监听文件变化，一旦发现文件发生变化，webpack就会重新编译该文件，并将其注入到浏览器中，从而实现热更新。

webpack热更新如何实现

webpack热更新的实现需要用到两个工具：

webpack-dev-server：一个开发环境下的webpack服务器，可以监听文件变化并自动重新编译。
webpack-hot-middleware：一个webpack插件，可以将webpack的编译结果注入到浏览器中。

webpack热更新的配置

要启用webpack热更新，需要在webpack的配置文件中进行如下配置：

// webpack.config.js
module.exports = {
  // ...其他配置
  devServer: {
    hot: true, // 启用webpack-dev-server的热更新功能
  },
  plugins: [
    // ...其他插件
    new webpack.HotModuleReplacementPlugin(), // 安装webpack-hot-middleware插件
  ],
};

React热更新

React热更新是webpack热更新的一种常见应用，它可以实现React组件的热更新，而无需重刷浏览器。

要启用React热更新，需要在React项目中安装以下两个依赖：

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

然后在webpack的配置文件中进行如下配置：

// webpack.config.js
module.exports = {
  // ...其他配置
  module: {
    rules: [
      // ...其他规则
      {
        test: /\.jsx?$/,
        use: [
          // ...其他loader
          {
            loader: 'react-hot-loader/webpack',
          },
        ],
      },
    ],
  },
  plugins: [
    // ...其他插件
    new webpack.HotModuleReplacementPlugin(), // 安装webpack-hot-middleware插件
  ],
};

最后在React组件中使用react-hot-loader提供的withHotReload函数包裹组件，即可实现热更新。

// App.jsx
import withHotReload from 'react-hot-loader/withHotReload';

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
      </div>
    );
  }
}

export default withHotReload(App);