create-react-app webpackの設定とファイルはどこにありますか？

create-react-appパッケージでReactJSプロジェクトを作成しましたが、うまくいきましたが、webpackファイルと構成が見つかりません。

react-create-appはwebpackでどのように機能しますか？webpack構成ファイルは、デフォルトのインストールのどこにありますcreate-react-appか？プロジェクトのフォルダーに構成ファイルが見つかりません。

オーバーライド構成ファイルを作成していません。他の記事で構成設定を管理できますが、従来の構成ファイルを見つけたいです。

webpackファイルと構成を検索する場合は、package.jsonファイルに移動してスクリプトを探します

スクリプトオブジェクトがライブラリ反応スクリプトを使用していることがわかります

次にnode_modulesに移動し、react-scriptsフォルダーを探しますreact-script-in-node-modules

このreact-scripts / scriptsおよびreact-scripts / configフォルダーには、すべてのWebpack構成が含まれています。

ドキュメントから：

WebpackやBabelなどのツールをインストールまたは構成する必要はありません。コードに集中できるように、これらは事前構成および非表示になっています。

設定ファイルにアクセスしたい場合は、以下を実行してイジェクトする必要があります。

npm run eject

注：これは一方向の操作です。イジェクトすると、元に戻すことはできません。

ほとんどのシナリオでは、イジェクトしないで、別の方法で機能させる方法を見つけることをお勧めします。そうすればcreate-react-app、Webpackの依存関係の地獄に対処する必要がなく、依存関係を更新できます。

多くの人が自分の設定を追加するためにwebpackの設定とファイルを見つけることを目的としてこのページにアクセスします。実行せずにこれを実現する別の方法npm run ejectは、react-app-rewiredを使用することです。これにより、イジェクトせずにwebpack構成ファイルを上書きできます。

あなたがイジェクトしたくなくて、あなたがそれらを見つけるであろう設定を見たいだけだと仮定します /node_modules/react-scripts/config

webpack.config.dev.js. //used by `npm start`
webpack.config.prod.js //used by `npm run build`

が使用するWebpack設定create-react-appはこちら：https : //github.com/facebook/create-react-app/tree/master/packages/react-scripts/config

あなたは内部でそれを見つけることができるの/ configフォルダー。

イジェクトすると、次のようなメッセージが表示されます。

 Adding /config/webpack.config.dev.js to the project
 Adding /config/webpack.config.prod.js to the project

Webpackの構成は、react-scriptsによって処理されています。すべてのwebpack構成はnode_modules react-scripts / config内にあります。

そして、あなたがwebpackの設定をカスタマイズしたい場合は、このcustomize-webpack-configに従うことができます

次のコマンドを実行して、構成ファイルを取り出してみてください。

npm run eject

次に、プロジェクトに作成されたconfigフォルダーを見つけます。あなたはあなたのwebpack設定ファイルをinitで見つけるでしょう。

私はそれがかなり遅いことを知っていますが、この問題に遭遇する将来の人々のために、CRAのwebpack設定にアクセスしたい場合は、実行する必要がある以外に他の方法はありません：

$ npm run eject

ただし、排出の場合は、CRAの更新パイプラインから自分自身を取り除くため、排出の時点から自分で維持する必要があります。

私はこの問題に何度も遭遇したため、CRAとほとんど同じ設定を持つ反応アプリ用のテンプレートを作成しましたが、追加の特典（styled-components、jestユニットテスト、デプロイメント用のTravis ci、よりきれいなものなど）も持っています、ESLintなど）を使用して、メンテナンスを容易にします。リポジトリをチェックしてください。