In this tutorial, you will learn how to add custom webpack config within a CreateReactApp application. CreateReactApp is greater for people new to React, or, to get a project quickly up and running, however, out-of-the-box all the config is hidden within a separate NPM package called react-scripts. If you look within the 'react-scripts' folder within your 'mode_modules' folder you will find all the webpack config CreateReactApp uses.

This causes a dilemma... if the config is defined within an NPM then this means you can not alter or modify it. How then, are you meant to change if you have custom needs? This is where react-app-rewired comes into play. To install 'react-app-rewired' simply type:

yarn add react-scripts -d

After installing the plug-in, you will want to create a new file called 'config-overrides.js' that lives within the root directory of your app, like so:

+-- your-project | +-- config-overrides.js

Next, you will need to tell NPM/Yarn to use the package when running the app. This is done within 'pack'age.json'. Within the scripts section you will need to update all of your scripts so that it uses 'react-app-rewired' rather than 'react-scripts', like this:

To

Within the 'config-overrides.js' you are free to add into whatever config that you want. FOr example, you could create some config to bundle your CSS differently, copy the output files into a different directory, or, even add some cache-busting to the CSS and JS files, like so:

Using 'react-app-rewird' is very powerful and lets you customize your application so it works in production the way that you need it to work. Enjoy!