Calling webpack.ignorePlugin (to tree-shake Moment.js locales) with CRA + rescripts

Question

I am using CRA + with rescripts

I want to tree-shake Moment.js locales, exactly the same way as shown in ignorePlugin Webpack docs:

new webpack.IgnorePlugin({
  checkResource (resource) {
    // do something with resource
    return true|false;
  }
});

I know I can easily transform webpack config with a rescript:

config => {
   const newConig = ...
   return newConfig
}

But how can I get hold of the webpack object to call the IgnorePlugin method - or achieve the same result?

I am willing to switch from rescripts to an alternative, like react-app-rewired, if necessary.

score 0 · Answer 1 · answered Jun 10 '21 at 05:03

The resulting configuration should have, among other options, a plugins options.

So let's say that your newConfig inherits all the config options. Normally the newConfig.plugins will point to the inherited default plugin's array.

To enhance/extend the plugins list all you have to do is to alter that array, ie. just push your plugin at whatever index (eg. last) within that newConfig.plugins array.

Example:

const Webpack = require("webpack");

function webpack(config, env) {
  const newConfig = Object.assign({}, config);
  newConfig.plugins = newConfig.plugins || [];

  const myPlugin = new Webpack.IgnorePlugin({
    checkResource(resource) {
      // do something with resource
      return true | false;
    }
  });

  newConfig.plugins.push(myPlugin);

  return newConfig;
}

module.exports = { webpack };

Calling webpack.ignorePlugin (to tree-shake Moment.js locales) with CRA + rescripts

1 Answers1