397

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

ruffin
  • 16,507
  • 9
  • 88
  • 138
Mohammad
  • 4,441
  • 3
  • 13
  • 15

11 Answers11

212

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.

Vikram Thakur
  • 2,329
  • 1
  • 11
  • 16
  • 4
    I saw but i have not react-scripts dir – Mohammad Jan 23 '18 at 07:34
  • 5
    I just created an app using create-react-app and in my case there is a folder react-scripts in node_modules. can you share your package.json – Vikram Thakur Jan 23 '18 at 07:42
  • 13
    **This answer is no longer correct**, NPM is now *flat* meaning all the modules are on the root `node_modules` directory – vsync Sep 01 '18 at 13:02
  • 10
    The actual webpack config is here: https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/config/webpack.config.js – protoEvangelion Nov 21 '18 at 20:24
  • 14
    The most common use case would be to customize the project's webpack config. But if it is in node_modules it will be overwritten in every npm install, won't it? – Blanc Mar 06 '20 at 14:13
  • That's correct, if you update any code in node_modules and do npm install, your changes are gone. So we should avoid updating the node_modules code. But as you mentioned there are use cases where you want to updated the configuration sitting in your node modules. In case of CRA, there is a module called customize-cra which allows you to do that https://github.com/arackaf/customize-cra – Vikram Thakur Apr 24 '20 at 09:15
  • @Blanc That's why you should clone CRA, modify whatever you want, and use your own version instead of the official one, if you want this configuration changed. It's their policy decision to not let users make changes to the webpack configuration. You either have to eject and do everything yourself, or clone CRA as I said. – Mörre Aug 11 '23 at 09:45
  • you can also use [craco](https://craco.js.org/docs/) to override CRA configurations without ejecting it – murtuzaali_surti Aug 27 '23 at 05:30
147

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

klugjo
  • 19,422
  • 8
  • 57
  • 75
  • 14
    I know these are hidden, but i wanna know where are these and how react-create-app handle this ability ? – Mohammad Jan 23 '18 at 07:06
  • 1
    Then you will probably have to look at the source code. I am not sure – klugjo Jan 23 '18 at 07:08
  • 2
    @Mohammad checkout the source for 'react-scripts' you can find all the config there – Jose Munoz Oct 02 '18 at 14:45
  • 1
    Doesn't answer the question, but helped me regardless – dǝɥɔS ʇoıןןƎ Jan 09 '19 at 10:13
  • 1
    Looks like Craco is currently having some issues with create-react-app 5. They've been working on patching this since January, but 5 months later and still not quite done https://github.com/gsoft-inc/craco/issues/378 – Shwheelz Jun 08 '22 at 13:02
  • Craco is the way to go. It provides overrides for webpack, babel, eslint and others withou the need to eject [https://craco.js.org/docs/configuration/getting-started/](https://craco.js.org/docs/configuration/getting-started/) . Issues also solved for CRA5 [https://github.com/dilanx/craco/issues/426#issuecomment-1307319525](https://github.com/dilanx/craco/issues/426#issuecomment-1307319525). – danb4r Feb 06 '23 at 21:31
67

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.

jjbskir
  • 8,474
  • 9
  • 40
  • 53
  • 15
    Is it still the preferred solution? There is this warning on rewired project: https://github.com/timarney/react-app-rewired#rewire-your-app- : "As of Create React App 2.0 this repo is "lightly" maintained mostly by the community at this point. ... Note: I personally use next.js or Razzle which both support custom Webpack out of the box." – Anthony Kong Jan 29 '19 at 23:39
  • 3
    @AnthonyKong thanks for this update, the situation is really bad... central upstream discussion appears to be at: https://github.com/facebook/create-react-app/issues/6303 – Ciro Santilli OurBigBook.com Apr 27 '21 at 17:41
44

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`
ravibagul91
  • 20,072
  • 5
  • 36
  • 59
vv1z
  • 467
  • 4
  • 8
29

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

Willian Mitsuda
  • 1,249
  • 1
  • 12
  • 14
Mihai Rotaru
  • 1,953
  • 3
  • 26
  • 28
12

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
Alfrex92
  • 6,278
  • 9
  • 31
  • 51
10

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

Hassan Ajaz
  • 613
  • 8
  • 15
  • 1
    The instructions at the link labeled `customize-webpack-config` depend on `react-app-rewired`, which is mostly unmaintained according to its [GitHub README](https://github.com/timarney/react-app-rewired#readme). – Eponymous Jul 16 '21 at 19:44
7

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 "own" the configs. No support will be provided. Proceed with caution...

Solution - use craco.

valk
  • 9,363
  • 12
  • 59
  • 79
  • 3
    craco does not work with react-scripts 5. – tutiplain Mar 31 '22 at 18:41
  • @tutiplain do you know a tool that works with cra 5? – Janis Jansen Jun 30 '22 at 15:25
  • 1
    @JanisJansen I do not. I needed this because my project uses some LESS that is embedded somewhere deep in node_modules. I ended up using the less compiler directly and embedding the resulting stylesheet directly in the react code. – tutiplain Jul 01 '22 at 16:07
4

I'm using create-react-app with craco, and I was able to override my webpack configuration when updating to webpack 5 with the craco.config.js:

module.exports = {
    style: {
        postcssOptions: {
            plugins: [
            require('tailwindcss'),
            require('autoprefixer'),
            ],
        },
    },
    webpack: {
        configure: (webpackConfig, { env, paths }) => {
            // eslint-disable-next-line no-param-reassign
            webpackConfig.resolve.fallback = {
                fs: false,
            };
            return webpackConfig;
        },
    },
}
therightstuff
  • 833
  • 1
  • 16
  • 21
3

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.

Vinayak humberi
  • 191
  • 3
  • 8
  • 2
    Be aware that this is a major step that you can't easily come back from. This would be a pretty drastic solution to getting rid of a warning. – scrozier Feb 10 '22 at 16:06
0

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.

nas.engineer
  • 374
  • 2
  • 8