Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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-create-app work with webpack? Where are the webpack configuration files located in a default installation with create-react-app? I'm unable to find configuration files in my project's folders.

I have not created an override config file. I can manage config settings with other articles but I want to find the conventional config file(s).

like image 209
Mohammad Avatar asked Oct 03 '22 07:10

Mohammad


People also ask

How do you find webpack config file in Create react app?

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.

Where can I find webpack config file?

The webpack configuration file webpack. config. js is the file that contains all the configuration, plugins, loaders, etc. to build the JavaScript part of the NativeScript application. The file is located at the root of the NativeScript application.

Does create react app come with webpack?

Create-React-App is a great tool to bootstrap React apps, but it offers only limited access to the configuration of the production build. While it uses Webpack under the hood, the WebPack configuration is not exposed to the user - unless you decide to eject .


2 Answers

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

img

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.

like image 190
Vikram Thakur Avatar answered Oct 20 '22 15:10

Vikram Thakur


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.

If you need to override some of the config options, you can have a look at https://github.com/gsoft-inc/craco

like image 128
klugjo Avatar answered Oct 20 '22 15:10

klugjo