DEV Community

Akshay Kumar
Akshay Kumar

Posted on • Edited on

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

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",
}
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode

I have had issues in doing it the native way:

fixBabelImports('import', {
+     libraryName: 'antd-mobile',
+     style: 'css',
+   }),
Enter fullscreen mode Exit fullscreen mode
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()
);

Enter fullscreen mode Exit fullscreen mode
  • Start the app, Voila!, it should be good and working.
$ cd my-app
$ npm start
Enter fullscreen mode Exit fullscreen mode

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

Top comments (2)

Collapse
 
feralamillo profile image
Feralamillo

Thanks for the post Akshay Kumar! I'm looking for a good solution to work on create react app without ejecting. Currently, I have found 2 options but seem to have drawbacks:

  1. Create React App rewired as you mention in this post but it seems is not maintained.
  2. Forking Create React App changing the config but this requires maintaining the repo.
Collapse
 
nodewarrior profile image
Akshay Kumar

Hey @feralamillo , Thanks for the comment. Yeah that was low on maintenance, but now it got back to being maintained. Seems like many need this, also i found razzle which supports custom webpack config.