首页 > 解决方案 > 让 Webpack React Fast Refresh 插件忽略掉毛错误

问题描述

我正在为 HMR 使用这个插件:https ://www.npmjs.com/package/@pmmmwh/react-refresh-webpack-plugin 。

如何阻止它阻止页面显示非破坏性错误?

例如 linting 问题。

在此处输入图像描述

我的设置几乎是从他们的示例中复制的:

const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
const webpack = require('webpack');
// ... your other imports
 
const isDevelopment = process.env.NODE_ENV !== 'production';
 
module.exports = {
  // It is suggested to run both `react-refresh/babel` and the plugin in the `development` mode only,
  // even though both of them have optimisations in place to do nothing in the `production` mode.
  // If you would like to override Webpack's defaults for modes, you can also use the `none` mode -
  // you then will need to set `forceEnable: true` in the plugin's options.
  mode: isDevelopment ? 'development' : 'production',
  module: {
    rules: [
      // ... other rules
      {
        test: /\.[jt]sx?$/,
        exclude: /node_modules/,
        use: [
          // ... other loaders
          {
            loader: require.resolve('babel-loader'),
            options: {
              // ... other options
              plugins: [
                // ... other plugins
                isDevelopment && require.resolve('react-refresh/babel'),
              ].filter(Boolean),
            },
          },
        ],
      },
    ],
  },
  plugins: [
    // ... other plugins
    isDevelopment && new webpack.HotModuleReplacementPlugin(),
    isDevelopment && new ReactRefreshWebpackPlugin(),
  ].filter(Boolean),
  // ... other configuration options
};

标签: javascriptreactjswebpack

解决方案


我在 API 文档中错过了这个:

new ReactRefreshWebpackPlugin({ overlay: false })

推荐阅读