In this tutorial, you will learn how to add custom webpack configuration within a CreateReactApp application. CreateReactApp is great for people new to React, or, for anyone who wants to get a ReactJS application up and running quickly. With a few keystrokes, you can get a site up and running with ReactJS quickly without doing anything else. If you want to do more complicated things, however, there is one issue.
All of the CreateReactApp webpack configuration is hidden. The config is pulled into the application via an NPM package called react-scripts. After doing an npm install, if you look within the react-scripts folder within the node_modules folder, you will find all the webpack config that CreateReactApp uses. This causes a dilemma... if the config is defined within an NPM package, how can you update it? How are you meant to change it for your custom needs? This is where react-app-rewired comes into play. To install react-app-rewired simply type:
After installing the package, create a new file and name it 'config-overrides.js'. config-overrides.js' will need to live within the root directory of your app, like so:
- root
- config-overrides.js
Next, you will need to configure your application to use this file. This is done within package.json. Within the scripts section you will need to update all of your scripts so that it references react-app-rewired rather than react-scripts. For example, change this:
To this:
Within config-overrides.js you are now free to apply whatever config changes that your little heart desires. 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. Happy coding!
