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-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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

You can find it inside the  config folder   When you eject you get a message like     Adding  config webpack config dev js to the project  Adding  config webpack config prod js to the project

User · Answer

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

User · Answer

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

User · Answer

Ejecting is not the best option as well as editing something under node modules  react-app-rewired is not maintained and has the warning      you now  quot own quot  the configs  No support will be provided  Proceed with caution     Solution - use craco

User · Answer

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

User · Answer

I know it s pretty late  but for future people stumbling upon this issue  if you want to have access to the webpack config of CRA  there s no other way except you have to run     npm run eject   However  with ejection  you ll strip away yourself from CRA pipeline of updates  therefore from the point of ejection  you have to maintain it yourself   I have come across this issue many times  and therefore I ve created a template for react apps which have most of the same config as CRA  but also additional perks  like styled-components  jest unit test  Travis ci for deployments  prettier  ESLint  etc     to make the maintenance easier  Check out the repo

User · Answer

Try ejecting the config files  by running   npm run eject   then you ll find a config folder created in your project  You will find your webpack config files init

[javascript] where is create-react-app webpack config and files?

Examples related to javascript

Examples related to reactjs

Examples related to webpack

Examples related to ecmascript-6

Examples related to create-react-app