where is create-react-app webpack config and files?
JavascriptReactjsWebpackEcmascript 6Create React-AppJavascript Problem Overview
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).
Javascript Solutions
Solution 1 - Javascript
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.
Solution 2 - Javascript
The files are located in your node_modules/react-scripts
folder:
Webpack config:
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
Solution 3 - Javascript
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.
Solution 4 - Javascript
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`
Solution 5 - Javascript
Webpack config used by create-react-app
is here:
https://github.com/facebook/create-react-app/tree/master/packages/react-scripts/config
Solution 6 - Javascript
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
Solution 7 - Javascript
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
Solution 8 - Javascript
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.
Solution 9 - Javascript
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.
Solution 10 - Javascript
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;
},
},
}
Solution 11 - Javascript
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.