where is create-react-app webpack config and files?

Question

I create a ReactJS project with the create-react-app package and that worked well, but I cannot find webpack files and configurations.

How does react-cr

Answer 1

Webpack config used by create-react-app is here: https://github.com/facebook/create-react-app/tree/master/packages/react-scripts/config

Answer 2

Webpack configuration is being handled by react-scripts. You can find all webpack config inside node_modules react-scripts/config.

And If you want to customize webpack config, you can follow this customize-webpack-config

Answer 3

If you want to find webpack files and configurations go to your package.json file and look for scripts

You will find that scripts object is using a library react-scripts

Now go to node_modules and look for react-scripts folder react-script-in-node-modules

This react-scripts/scripts and react-scripts/config folder contains all the webpack configurations.

Answer 4

The files are located in your node_modules/react-scripts folder:

Webpack config:

https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/config/webpack.config.js

Start Script:

https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/scripts/start.js

Build Script:

https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/scripts/build.js

Test Script:

https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/scripts/test.js

and so on ...

Now, the purpose of CRA is not to worry about these.

From the documentation:

You don’t need to install or configure tools like Webpack or Babel. They are preconfigured and hidden so that you can focus on the code.

If you want to have access to the config files, you need to eject by running:

npm run eject

Note: this is a one-way operation. Once you eject, you can’t go back!

In most scenarios, it is best not to eject and try to find a way to make it work for you in another way. That way, you can update your dependencies through create-react-app and not have to deal with Webpack dependency hell.

Answer 5

A lot of people come to this page with the goal of finding the webpack config and files in order to add their own configuration to them. Another way to achieve this without running npm run eject is to use react-app-rewired. This allows you to overwrite your webpack config file without ejecting.

Answer 6

Assuming you don't want to eject and you just want to look at the config you will find them in /node_modules/react-scripts/config

webpack.config.dev.js. //used by `npm start`
webpack.config.prod.js //used by `npm run build`