Override CRA and add webpack config, without ejecting.

I'll get right down to the process. Webpack is awesome, so is create-react-app. Ejecting CRA(create-react-app) to configure webpack has been a challenge, even to most of the pro developers. Me being a simpleton, I wanted to figure out an efficient way to configure and share so as to help out a fellow dev.

• Create a react app, use your creativity for naming.

$ npm install -g create-react-app $ create-react-app my-app  $ cd my-app 

• Here, we have to customize webpack config. Usually we eject CRA, Instead we are going to use an awesome library called react-app-rewired with customize-cra. Why would we need two libraries? Lets install react-app-rewired and customize-cra

Note- Do not panic, it doesn't add any noise to your code.

$ npm install react-app-rewired customize-cra --save-dev 

You would have to make few changes to your package.json

/* package.json */ "scripts": { - "start": "react-scripts start", + "start": "react-app-rewired start", - "build": "react-scripts build", + "build": "react-app-rewired build", } 

• Create a config-overrides.js file, this handles all of your webpack configuration. This is an example on how i would use it, add your own plugins, presets and imports just as we do in native webpack.

Note- Hey if you find any difficulties in importing two libraries, please use my implementation. Before you import, you need babel-plugin-import. This is our Babel plugin for importing components on demand.

$ npm install babel-plugin-import --save-dev 

I have had issues in doing it the native way:

fixBabelImports('import', { + libraryName: 'antd-mobile', + style: 'css', + }), 

const { override, addLessLoader, disableChunk, addBabelPlugins, removeModuleScopePlugin, addBabelPresets } = require("customize-cra"); module.exports = override( ...addBabelPresets("@babel/preset-env", "@babel/preset-react"), ...addBabelPlugins( [ "import", { libraryName: "antd", libraryDirectory: "lib", style: true }, "antd" ], [ "import", { libraryName: "antd-mobile", libraryDirectory: "lib", style: "css" }, "antd-mobile" ] ), addLessLoader({ javascriptEnabled: true, importLoaders: true, modifyVars: {} }), disableChunk(), removeModuleScopePlugin() ); 

• Start the app, Voila!, it should be good and working.

$ cd my-app $ npm start 

For any further information on react-app-rewired or customize-cra, please checkout these links and kudos for their awesome library[^1]
react-app-rewired
customize-cra