You're using create-react-app but you need to do some customizations to the webpack configs while you wait for the CRA team to implement/have a solution for whatever it is you need.
BUT - you do not want to eject as you want to keep up to date with any changes in CRA and possibly eventually move away from your customizationed webpack config and go back to using the mainline.
CRA's webpack config is in its own package. This is great because, instead of ejecting - you can just fork their package. Then you can make your customizations and update your projects package.json to point to your forked react-scripts package.
You could even publish the package to npm, for now we will just install from GitHub.
This guide assumes you already scaffolded your CRA project.
- Clone the create-react-app repo.
git clone https://github.com/facebookincubator/create-react-app.git
cd create-react-app- Add the remote upstream
git remote add upstream https://github.com/facebookincubator/create-react-app.git
git fetch upstream- Checkout the latest stable tag (1.0.10 as of 7/14/2017):
git checkout tags/v1.0.10 -b $CUSTOM_BRANCH_NAME- Switch to the
react-scriptsdir
cd packages/react-scripts-
Make whatever changes you need, the relevant files are mostly the webpack configs themselves in the
configdirectory. -
Initialize your new git repo, etc
-
Rev the version
npm version patch
# v1.0.11- Check in the changes and push them to your remote
git add package.json
git commit -m "v1.0.11"
git push
git push --tags- Update your projects
package.json:
// package.json (with vanilla react-scripts)
...
"react-scripts": "1.0.10"
...// NEW
// package.json (with custom react-scripts via GitHub)
...
"react-scripts": "$YOUR_GITHUB_REPO_URL#v1.0.11"- Run your node package manager to update
npm install
yarn install
For step 6,
git filter-repo --subdirectory-filter packages/react-scripts --forceis a good option.