javascript - how to add webpack plugin to react-rewired - Stack Overflow

admin管理员组

文章数量:1405581

I use rca with react-rewired wrapper. To add custom configuration to webpack I created config-overrides.js file where I store my config settings. I added an babel-plugin-import and it was pretty easy. But now I want to use moment-locales-webpack-plugin to configure only one locale in my app to cut off app's weight.

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'] }),
);

After yarn start it shows me:

Failed to pile.

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

Can you help me with that please?

UPDATE I find out how to add a rule to override function, but still can't make it work with only 1 locale.

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;
  }
);

I use rca with react-rewired wrapper. To add custom configuration to webpack I created config-overrides.js file where I store my config settings. I added an babel-plugin-import and it was pretty easy. But now I want to use moment-locales-webpack-plugin to configure only one locale in my app to cut off app's weight.

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'] }),
);

After yarn start it shows me:

Failed to pile.

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

Can you help me with that please?

UPDATE I find out how to add a rule to override function, but still can't make it work with only 1 locale.

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;
  }
);

• javascript
• reactjs
• webpack
• babeljs
• create-react-app

Share Improve this question Follow edited Nov 16, 2019 at 13:44 poltorin asked Nov 15, 2019 at 16:29 poltorinpoltorin 30222 gold badges44 silver badges1313 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

The right way to add a plugin to customize-cra according to this issue is:

const MomentLocalesPlugin = require('moment-locales-webpack-plugin');

const addMomentLocalesPlugin = config => {
  config.plugins.push(new MomentLocalesPlugin());
  return config;
}

module.exports = override(
  addMomentLocalesPlugin,
  //...
)

And if you want to keep only a few languages in your bundle, you can try:

new MomentLocalesPlugin({ localesToKeep: ['es-us', 'pt'] })

Instead of

new MomentLocalesPlugin()

From the error:

Only localesToKeep and ignoreInvalidLocales options are supported at the moment

Try changing your code from localeToKeep to localesToKeep. With the s.

本文标签： javascripthow to add webpack plugin to reactrewiredStack Overflow