热更新 指的是，在开发过程中，修改代码后，仅更新修改部分的内容，无需刷新整个页面。

简单来说： 就是修改了一个文件的内容，webpack就更新这个修改的文件，不需要刷新整个页面

2.1 修改 webpack-dev-server 配置

使用 webpack 内置的 HMR 插件，更新 webpack-dev-server 配置。

webpack-dev.js配置

devServer: {
  // 告诉服务器位置
  static: {
    directory: paths.resolveApp('dist'),
  },
    port: 8888,
      // 热更新
      hot: true
    // contentBase: './dist'
  },

2.2 引入 react-refresh-webpack-plugin

使用 react-refresh-webpack-plugin 热更新 react 组件。

安装 ：

npm install -D @pmmmwh/react-refresh-webpack-plugin react-refresh

webpack.dev.js 配置如下：

// 引入 React 热更新组件
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
module.exports = {
  plugins: [
        // 使用了 hot: true, 就不需要引入 webpack.HotModuleReplacementPlugin() 组件了
    // new webpack.HotModuleReplacementPlugin(),
    // 引入组件
    new ReactRefreshWebpackPlugin(),
  ]
}

最终效果

更新 react 组件代码时，无需刷新页面，仅更新组件部分。