DEV Community

loading...

Override CRA and add webpack config, without ejecting.

nodewarrior profile image Akshay Kumar ・2 min read

I'll get right down to the process. Webpack is awesome, so is the create-react-app. Ejecting CRA(create-react-app) always to configure webpack has been a challenge even to the pro devs. Since, i'm a noob i wanted to find out a simple way to do it and share as it might help out a fellow noob.

  • Create a react app, use any name you want.
$ npm install -g create-react-app
$ create-react-app my-app

$ cd my-app
  • Now, we need to customize the webpack config. Usually we eject, but instead we are going to use an awesome library called react-app-rewired with customize-cra. Why do you need two? So, react-app-rew

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 like this.

/* 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 is the one which handles all your webpack configuration. This is an example on how i use it, you can add your own plugins, presets and imports just as you do in webpack.

Note- Also, hey if you find difficulties in having two libraries being imported you can use it the way i did. Before you start using import, you need babel-plugin-import. Babel plugin for importing components on demand.

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

I had some issues in doing 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()
);

  • Now you can just start the app, it should be all good and working.
$ cd my-app
$ npm start

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

Discussion (2)

pic
Editor guide
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 Author

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.