Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to update webpack config for a react project created using create-react-app?

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.

like image 354
Deepshikha Mohanta Avatar asked Aug 06 '20 08:08

Deepshikha Mohanta


People also ask

How do you update webpack config in Create-react-app?

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.

Where is my webpack config 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.

Can I use webpack With create-react-app?

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.


1 Answers

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

like image 152
RiverTwilight Avatar answered Sep 24 '22 08:09

RiverTwilight