web-dev-qa-db-ja.com

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

私はcreate-react-appパッケージを使ってReactJSプロジェクトを作成しましたが、それはうまくいきましたが、webpackのファイルや設定が見つかりません。

React-create-appはWebpackとどのように連携しますか？ create-react-appを使ったデフォルトのインストールでは、webpack設定ファイルはどこにありますか？プロジェクトのフォルダに設定ファイルが見つかりません。

上書き設定ファイルを作成していません。私は他の記事で設定を管理することができますが、私は従来の設定ファイルを見つけたいです。

javascriptreactjswebpackecmascript-6create-react-app
83
Mohammad

あなたがwebpackファイルと設定を見つけたいならあなたのpackage.jsonファイルに行き、 scripts を探してください。

img

Scriptsオブジェクトがライブラリを使っていることがわかります react-scripts

それではnode_modulesに行き、react-scriptsフォルダーを探してください/ react-script-in-node-modules /

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

50
Vikram Thakur

のドキュメントから ：

WebpackやBabelのようなツールをインストールしたり設定したりする必要はありません。あなたはコードに集中できるようにそれらは事前設定され隠されています。

設定ファイルにアクセスしたい場合は、次のコマンドを実行して eject を実行する必要があります。

npm run eject

注：これは一方向の操作です。取り出したら、元に戻れません。

ほとんどのシナリオでは、別の方法であなたのために動くようにするための方法を取り出して見つけようとしないことが最善です。そうすれば、あなたはcreate-react-appを通してあなたの依存関係を更新することができ、Webpackの依存関係地獄を扱う必要はありません。

31
klugjo

自分の設定を追加するためにwebpackの設定とファイルを見つけることを目的として、このページに多くの人が訪れます。 npm run ejectを実行せずにこれを実現するもう1つの方法は、 react-app-rewired を使用することです。これにより、Webpackの設定ファイルを取り出すことなく上書きすることができます。

11
jjbskir

/config フォルダの中にあります。

取り出すと、次のようなメッセージが表示されます。

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

create-react-appによって使用されるWebpack設定はここにあります： https://github.com/facebook/create-react-app/tree/master/packages/react-scripts/config

6
Mihai Rotaru

あなたがイジェクトしたくないし、単に設定を見たいだけなら、/ node_modules/react-scripts/config webpack.config.dev.js. //used by `npm start` webpack.config.prod.js //used by `npm run build`にあります。

3
vv1z

Webpackの構成は react-scripts で処理されています。 node_modulesreact-scripts/config内ですべてのwebpack構成を見つけることができます。

また、webpackの設定をカスタマイズする場合は、次のようにします customize-webpack-config

1
Hassan Ajaz

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

npm run eject

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

0
Vinayak humberi