React.js
Pocket

Create React Appで作ったものをカスタマイズする機会があったのでメモ

Create React Appでは最低限必要なものは揃ってて環境構築がグッと楽になるツールですが、不足した分は足さないといけなくてwebpackをいじるような変更を加える場合は、カスタマイズするコマンドを打つ必要があります。

それが以下のコマンド

yarn run eject

これを打つと元の状態には戻せないです。使用しているライブラリのバージョン等は自己管理になります。

もとのディレクトリ構成はこんな感じ

.
├── README.md
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   └── registerServiceWorker.js
└── yarn.lock

それが、yarn run ejectを打つとこうなります。

.
├── README.md
├── config
│   ├── env.js
│   ├── jest
│   │   ├── cssTransform.js
│   │   └── fileTransform.js
│   ├── paths.js
│   ├── polyfills.js
│   ├── webpack.config.dev.js
│   ├── webpack.config.prod.js
│   └── webpackDevServer.config.js
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── scripts
│   ├── build.js
│   ├── start.js
│   └── test.js
├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   └── registerServiceWorker.js
└── yarn.lock

webpackの設定をいじりたい場合は、webpack.config.dev.jsやwebpack.config.prod.jsを修正します。

これでwebpackも自由にカスタマイズできるようになりました。

Pocket