How to Configure Webpack in a Create-React-App Project

1. What Is create-react-app Webpack in React?
2. Locate create-react-app Webpack Configurations and Files in React
3. Change Webpack Configuration of create-react-app in React

JavaScript bundlers facilitate the development process by combining separate files into one. For beginners, bundlers can be pretty difficult to set up.

When React framework was still in its infancy, a few years ago, the community was split between multiple bundlers. The team behind the framework decided to stop this division and select one preferred solution. The bundler they chose was webpack, but what default does not work for some people.

What Is create-react-app Webpack in React?

React has a starter project called create-react-app for building applications. Once installed, it provides an environment with an existing webpack configuration.

The setup process for the webpack is a little complicated. If you don’t know what you’re doing, setting up a webpack will take forever, and it might do more harm than good. Fortunately, create-react-app does all of that work for you.

In the background, create-react-app takes care of all the tooling for you. This way, beginner and intermediate React developers can focus on writing code rather than complex setup processes.

Locate create-react-app Webpack Configurations and Files in React

Once set up, the folder of a create-react-app project contains many other folders. Unless you know where to look, finding the configuration files for webpack can be difficult.

As a first step, you should open the package.json file. It’s where you can find information about dependencies and tools used on your app.

Once you open the file, scroll down to the 'scripts': {} object. You might notice that create-react-app uses a library called react-scripts.

To locate the configuration files for webpack, you should go to the node-modules folder and find the react-scripts directory. Depending on the library’s version, you should find the config folder; this folder features all config files, including the one for webpack.

Change Webpack Configuration of create-react-app in React

The only downside of the default webpack configuration is that it makes a lot of assumptions. Some React developers want to change the default webpack configuration of create-react-app.

The starter project handles external modules and libraries internally by default, so the package.json file appears clean.

This default behavior is useful, but sometimes it’s better to display full information about modules. That’s where npm run eject comes in.

If you run this command, the information about all your modules will be available in package.json. Running this command is necessary to edit the webpack configuration of your application.

Unless you know what you’re doing, running npm run eject can be quite risky. However, it’s possible to change the webpack configuration of your app without ejecting it.

To do this, you can use the library called react-app-rewired. To get more information about the library, read official docs.