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

要在 Webpack 中配置 `@pmmmwh/react-refresh-webpack-plugin` 插件，您需要进行以下步骤：

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');
   const ReactRefreshTypeScript = require('react-refresh-typescript');

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

   plugins: [
     new ReactRefreshWebpackPlugin()
   ],

4. 如果使用 TypeScript，需要添加 `ReactRefreshTypeScript` 到 ts-loader 的选项中：

   module: {
     rules: [
       {
         test: /\.tsx?$/,
         use: [
           'ts-loader',
           {
             loader: 'react-refresh-typescript',
             options: {
               // disable type checker - we will use it in fork plugin
               transpileOnly: true
             }
           }
         ],
         exclude: /node_modules/
       }
     ]
   },

5. 最后，在 devServer 中启用 `hot` 和 `hotOnly` 选项：

   devServer: {
     hot: true,
     hotOnly: true
   }

完成以上配置后，您可以在开发模式下使用 `@pmmmwh/react-refresh-webpack-plugin` 插件了。