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
Top comments (2)
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:
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.