I have created a react project using create-react-app. Now I need to update the webpack config, but I don't find the file anywhere. Do I need to create this file myself or what is the process? I am new to react and not really sure how to proceed from here.
Because If you want to add some loaders or update some configurations we need to update the webpack config of create-react-app . How to do it ? Go to node_modules/react-scripts/config/webpack. config.
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.
Now, anywhere on your system, you can run the create-react-app command to initiate the setup for a new Webpack-powered React app. The completed version of the code for this next section is available in heart-webpack-complete . This will create the boilerplate for the new app and install the app's dependencies.
No need to run npm run eject
Step 1
npm install react-app-rewired --save-dev
Step 2
Add config-overrides.js
to the project root directory.(NOT ./src)
// config-overrides.js
module.exports = function override(config, env) {
// New config, e.g. config.plugins.push...
return config
}
Step 3
'Flip' the existing calls to react-scripts in npm scripts for start, build and test
/* package.json */
"scripts": {
- "start": "react-scripts start",
+ "start": "react-app-rewired start",
- "build": "react-scripts build",
+ "build": "react-app-rewired build",
- "test": "react-scripts test",
+ "test": "react-app-rewired test",
"eject": "react-scripts eject"
}
Step 4
Restart your app. Done
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With