Override CRA and add webpack config, without ejecting.

Akshay Kumar — Wed, 21 Aug 2019 18:10:17 +0000

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

Forem: Akshay Kumar

Override CRA and add webpack config, without ejecting.