Customizing Webpack for react apps

If you have any of the following question this post might be helpful.

1. How to override default webpack config of react apps created with create-react-app?
2. How to modify default eslint rules/config of react apps?
3. How to add additional webpack plugins to react apps?
4. How to use custom eslint file when running react apps?

Solution : eject

Run npm run eject or yarn eject.

react-scripts will warn you, simply ignore 😇.

After this process completes CRA (create-react-app) will eject all configs and scripts
There will be 2 new folders in the root of the project

/config
..env.js
..getHttpsConfig.js
..modules.js
..paths.js
..pnpTs.js
..webpack.config.js   <----------- webpack config file
..webpackDevServer.config.js
../jest

/scripts
..build.js
..start.js
..test.js

There you go, modify the webpack.config.js files as you wish. Questions 1 and 3 are solved.
For Q2 and 4 you don't have to do anything, once we eject all the configs webpack will automatically use eslint files in the project root.