create-react-app webpack 配置和文件在哪里？

Question

我使用create-react-app包創建了一個 ReactJS 項目並且運行良好，但是我找不到 webpack 文件和配置。

react-create-app 如何與 webpack 配合使用？ 使用create-react-app的默認安裝中的 webpack 配置文件在哪里？ 我無法在我的項目文件夾中找到配置文件。

我還沒有創建覆蓋配置文件。 我可以使用其他文章管理配置設置，但我想找到傳統的配置文件。

Answer 1

如果您想查找 webpack 文件和配置，請轉到您的 package.json 文件並查找腳本

你會發現腳本對象正在使用一個庫react-scripts

現在轉到 node_modules 並查找 react-scripts 文件夾react-script-in-node-modules

這個react-scripts/scripts和react-scripts/config文件夾包含所有的 webpack 配置。

Answer 2

這些文件位於您的node_modules/react-scripts文件夾中：

網絡包配置：

https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/config/webpack.config.js

啟動腳本：

https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/scripts/start.js

構建腳本：

https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/scripts/build.js

測試腳本：

https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/scripts/test.js

等等...

現在，CRA 的目的不是擔心這些。

從文檔：

您不需要安裝或配置 Webpack 或 Babel 之類的工具。 它們是預先配置和隱藏的，以便您可以專注於代碼。

如果你想訪問配置文件，你需要通過運行來彈出：

npm run eject

注意：這是一種單向操作。 一旦彈出，就無法返回！

在大多數情況下，最好不要彈出並嘗試以另一種方式找到適合您的方法。

如果您需要覆蓋某些配置選項，您可以查看https://github.com/gsoft-inc/craco

Answer 3

很多人來到這個頁面的目的是找到 webpack 配置和文件，以便將他們自己的配置添加到它們中。 另一種無需運行npm run eject即可實現此目的的方法是使用react-app-rewired 。 這允許您在不彈出的情況下覆蓋您的 webpack 配置文件。

Answer 4

假設您不想彈出並且只想查看配置，您會在/node_modules/react-scripts/config找到它們

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

Answer 5

create-react-app使用的 Webpack 配置在這里： https : //github.com/facebook/create-react-app/tree/master/packages/react-scripts/config

Answer 6

您可以在/config文件夾中找到它。

當您彈出時，您會收到如下消息：

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

Answer 7

Webpack 配置由react-scripts處理。 您可以在 node_modules react-scripts/config 中找到所有 webpack配置。

如果你想自定義 webpack 配置，你可以按照這個custom-webpack-config

Answer 8

嘗試彈出配置文件，運行：

npm run eject

然后你會發現在你的項目中創建了一個 config 文件夾。 你會發現你的 webpack 配置文件 init.d 。

Answer 9

彈出不是最好的選擇，也不是在node_modules下編輯node_modules 。 react-app-rewired未維護並有警告：

...您現在“擁有”配置。 將不提供任何支持。 謹慎行事...

解決方案 -使用 craco 。

Answer 10

我知道現在已經很晚了，但是對於未來遇到這個問題的人來說，如果您想訪問 CRA 的 webpack 配置，除了必須運行之外別無他法：

$ npm run eject

但是，通過彈出，您將脫離 CRA 更新管道，因此從彈出的角度來看，您必須自己維護它。

我多次遇到過這個問題，因此我為 React 應用程序創建了一個模板，該模板與 CRA 的配置大部分相同，但還有額外的好處（如樣式組件、jest 單元測試、用於部署的 Travis ci，更漂亮、ESLint 等...）使維護更容易。 查看repo 。