How can i custom config Webpack without "npm run eject"

[ghost]

Sometimes I want to add webpack plugins externally. But how can I do this without "reject"?

i see a node_modules/react-script/config/webpack.config.js file.

However, there is more than one "plugin" definition in this file. Is there any way to configure here? Or can a separate file be specified for the configurations in the next version? for example:

like this node_modules/react-script/config/custom/webpack.config.js

Thank you

[teo-garcia]

Create React App comes with its own configuration that seeks to cover the most used Webpack plugins. However, adding new plugins obligates the user to eject it if no third library is used.

A popular approach to override it without ejecting your project is using

• react-app-rewired
• customize-cra

Normally, both packages work together. You can find more info in customize-cra's repository.

[cirosantilli]

This seems to be the central issue where this is being discussed: #6303

[ashvin777]

I was able to change Webpack configurations without ejecting the CRA app. It was done using the rewire npm package with minimal changes -

First change the scripts in pkg.json to below

   "start": "node scripts/start.js",
   "build": "node scripts/build.js",

scripts/start.js

const rewire = require('rewire');
const defaults = rewire('react-scripts/scripts/start.js');
const webpackConfig = require('react-scripts/config/webpack.config');
const webpackExternals = require('./webpack-externals');

//In order to override the webpack configuration without ejecting the create-react-app
defaults.__set__('configFactory', (webpackEnv) => {
  let config = webpackConfig(webpackEnv);

  //Customize the webpack configuration here, for reference I have updated webpack externals field
  config.externals = [..];

  return config;
}); 

scripts/build.js

const rewire = require('rewire');
const defaults = rewire('react-scripts/scripts/build.js');
const webpackExternals = require('./webpack-externals');

//In order to override the webpack configuration without ejecting the create-react-app
const config = defaults.__get__('config');

//Customize the Webpack configuration here,  for reference I have updated Webpack externals field
config.externals =[..]; 

This is working as expected in one of my applications. The good thing about this is it doesn't break the create-react-app structure and is very simple to integrate compared to react-app-rewired

[adamerose]

Could this possibly be added as a feature directly in create-react-app?

It seems like craco is currently the most maintained package for this. react-app-rewired claims it is "lightly" maintained and recommends using NextJS instead. There is also customize-cra and rescripts. It would be nice if there was an official solution.