如何将 webpack 插件添加到react-rewired

Question

我将 RCA 与react-rewired 包装器一起使用。为了向 webpack 添加自定义配置，我创建了config-overrides.js存储配置设置的文件。我添加了一个babel-plugin-import，这非常简单。但现在我想moment-locales-webpack-plugin在我的应用程序中仅配置一种区域设置以减少应用程序的重量。

const { override, fixBabelImports, addWebpackPlugin  } = require('customize-cra');
const MomentLocalesPlugin = require('moment-locales-webpack-plugin');

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
  }),
  addWebpackPlugin(MomentLocalesPlugin, { localeToKeep: ['us'] }),
);

之后yarn start它向我展示：

编译失败。

MomentLocalesPlugin: received unknown options: _pluginCompat, hooks, name, parentCompilation, outputPath, outputFileSystem, inputFileSystem, recordsInputPath, recordsOutputPath, records, removedFiles, fileTimestamps, contextT
imestamps, resolverFactory, infrastructureLogger, resolvers, options, context, requestShortener, running, watchMode, _assetEmittingSourceCache, _assetEmittingWrittenFiles, watchFileSystem. Only `localesToKeep` and `ignoreInva
lidLocales` options are supported at the moment

你能帮我吗？

更新 我找到了如何向override函数添加规则，但仍然无法使其仅适用于 1 个区域设置。

const { override, fixBabelImports } = require('customize-cra');
const MomentLocalesPlugin = require('moment-locales-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const path = require('path');

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
  }),
  function(config) {
    const alias = config.resolve.alias || {};
    alias['@ant-design/icons/lib/dist$'] = path.resolve(__dirname, './src/icons.js');

    config.resolve.alias = alias;
    config.plugins = (config.plugins || []).concat([
      new MomentLocalesPlugin(),
      new BundleAnalyzerPlugin(),
    ]);

    return config;
  }
);

Answer 1

从错误来看：

目前仅支持localesToKeep和选项ignoreInvalidLocales

尝试将您的代码从 更改localeToKeep为localesToKeep。与 s。