Tweak the create-react-app webpack config(s) without using 'eject' and without creating a fork of the react-scripts.
All the benefits of create-react-app without the limitations of "no config". You can add plugins, loaders whatever you need.
All you have to do is create your app using create-react-app and then rewire it.
Please Note:
By doing this you're breaking the "guarantees" that CRA provides. That is to say you now "own" the configs. No support will be provided. Proceed with caution.
1) Install react-app-rewired
$ npm install react-app-rewired --save-dev
2) Create a config-overrides.js
file in the root directory
/* config-overrides.js */
module.exports = function override(config, env) {
//do stuff with the webpack config...
return config;
}
+-- your-project
| +-- config-overrides.js
| +-- node_modules
| +-- package.json
| +-- public
| +-- README.md
| +-- src
Note: You can use one of the default rewires (see the packages dir) or injectBabelPlugin
3) 'Flip' the existing calls to react-scripts
in npm
scripts
/* package.json */
"scripts": {
- "start": "react-scripts start",
+ "start": "react-app-rewired start",
- "build": "react-scripts build",
+ "build": "react-app-rewired build",
- "test": "react-scripts test --env=jsdom",
+ "test": "react-app-rewired test --env=jsdom"
}
4) Start the Dev Server
$ npm start
5) Build your app
$ npm run build
Utilities (injectBabelPlugin)
Adding a Babel plugin can be done via the injectBabelPlugin(pluginName, config)
function. You can also use the "rewire" packages from this repo or listed below to do common config modifications.
const rewireMobX = require('react-app-rewire-mobx');
const rewirePreact = require('react-app-rewire-preact');
const {injectBabelPlugin} = require('react-app-rewired');
/* config-overrides.js */
module.exports = function override(config, env) {
// add a plugin
config = injectBabelPlugin('emotion/babel',config)
// use the Preact rewire
if (env === "production") {
console.log("⚡ Production build with Preact");
config = rewirePreact(config, env);
}
// use the MobX rewire
config = rewireMobX(config,env);
return config;
}
Community Maintained Rewires
Babel plugins
- react-app-rewire-emotion by @osdevisnot
- react-app-rewire-lodash by @osdevisnot
- react-app-rewire-styled-components by @mxstbr
Webpack plugins
- react-app-rewire-appcache-plugin by @icopp
- react-app-rewire-define-plugin by @icopp
- react-app-rewire-imagemin-plugin by @icopp
- react-app-rewire-preload-plugin by @icopp
- react-app-rewire-provide-plugin by @icopp