@pmmmwh/react-refresh-webpack-plugin 如何配置 webpack

@pmmmwh/react-refresh-webpack-plugin 是一个用于 Webpack 的插件，用于实现 React 组件的无需刷新热更新。要在 Webpack 中配置该插件，您需要执行以下步骤：

1. 安装 @pmmmwh/react-refresh-webpack-plugin 和 react-refresh 包，可以使用 npm 或 yarn 命令进行安装：

   npm install @pmmmwh/react-refresh-webpack-plugin react-refresh --save-dev

或

   yarn add @pmmmwh/react-refresh-webpack-plugin react-refresh --dev

2. 在 Webpack 配置文件中，导入插件和 ReactRefreshWebpackPlugin：

   const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');

3. 将 ReactRefreshWebpackPlugin 插件添加到 plugins 数组中：

   plugins: [
     new ReactRefreshWebpackPlugin()
   ],

4. 如果您使用的是 TypeScript，则需要在 ts-loader 选项中添加 react-refresh-typescript：

   module: {
     rules: [
       {
         test: /\.tsx?$/,
         use: [
           {
             loader: 'ts-loader',
             options: {
               getCustomTransformers: () => ({
                 before: [require('react-refresh-typescript')()]
               })
             }
           }
         ],
         exclude: /node_modules/
       }
     ]
   }

5. 在 devServer 中启用 hot 和 hotOnly 选项：

   devServer: {
     hot: true,
     hotOnly: true
   }

完成以上配置后，您就可以使用 @pmmmwh/react-refresh-webpack-plugin 实现 React 组件的无需刷新热更新了。