Override webpack optimization

Hi, I need some help trying to override the settings in TerserPlugin to disable mangling. Is this supported currently? I’ve tried setting up something like this but it doesn’t seem to take effect… Not 100% sure I’m doing it correctly.

webpack: {
    optimization: {
      minimizer: [
        new TerserPlugin({
          terserOptions: {
            mangle: false
...

The configuration I’m trying to modify is here https://github.com/facebook/create-react-app/blob/49e258b4a6d04fb7e3542d7a060c6dcad4093564/packages/react-scripts/config/webpack.config.js#L182

[patricklafrance]

Hi @carlosfunk

Yes it is supported but you have to use

webpack: {
    configure: {
        optimization: { .... }
    }
}

or

webpack: {
    configure: webpackConfig => {
          webpackConfig.optimization.minimizer = ....

          return webpackConfig;
    }
}

[liorfrenkel]

hey guys, in order to change the terser config, use the plugins section of craco:

// craco.config.js
module.exports = {
  plugins: [
    {
      plugin: {
        overrideWebpackConfig: ({
          webpackConfig,
        }) => {
          const minimizerIndex = webpackConfig.optimization.minimizer.findIndex(item => item.options.terserOptions);

          // do not mangle problematic modules of bitcoinjs-lib
          webpackConfig.optimization.minimizer[minimizerIndex].options.terserOptions.mangle = {
            ...webpackConfig.optimization.minimizer[minimizerIndex].options.terserOptions.mangle,
            reserved: ['BigInteger', 'ECPair', 'Point']
          };

          return webpackConfig;
        },
      },
    },
  ],
};

here I find the index of the terser plugin by searching for terserOptions
then I use that object to add/override the reserved option.
I hope that helps!