DEV Community

Mohit Kumar Yadav
Mohit Kumar Yadav

Posted on

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
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (0)