在 Create-React-App 專案中配置 Webpack

1. 什麼是 React 中的 create-react-app Webpack
2. 在 React 中找到 create-react-app Webpack 配置和檔案
3. 在 React 中更改 create-react-app 的 Webpack 配置

JavaScript 捆綁器通過將單獨的檔案合併為一個來促進開發過程。對於初學者來說，捆綁器可能很難設定。

幾年前，當 React 框架仍處於起步階段時，社群被多個捆綁器分開。框架背後的團隊決定停止這種劃分並選擇一個首選解決方案。他們選擇的捆綁器是 webpack，但預設的對某些人不起作用。

什麼是 React 中的 create-react-app Webpack

React 有一個名為 create-react-app 的啟動專案，用於構建應用程式。安裝後，它會提供一個具有現有 webpack 配置的環境。

webpack 的設定過程有點複雜。如果你不知道自己在做什麼，那麼設定一個 webpack 將花費很長時間，而且它可能弊大於利。幸運的是，create-react-app 為你完成了所有這些工作。

在後臺，create-react-app 會為你處理所有工具。這樣，初學者和中級 React 開發人員可以專注於編寫程式碼，而不是複雜的設定過程。

在 React 中找到 create-react-app Webpack 配置和檔案

設定完成後，create-react-app 專案的資料夾包含許多其他資料夾。除非你知道去哪裡尋找，否則很難找到 webpack 的配置檔案。

作為第一步，你應該開啟 package.json 檔案。在這裡你可以找到有關應用程式上使用的依賴項和工具的資訊。

開啟檔案後，向下滾動到 'scripts': {} 物件。你可能會注意到 create-react-app 使用了一個名為 react-scripts 的庫。

要找到 webpack 的配置檔案，你應該轉到 node-modules 資料夾並找到 react-scripts 目錄。根據庫的版本，你應該找到 config 資料夾；此資料夾包含所有配置檔案，包括用於 webpack 的配置檔案。

在 React 中更改 create-react-app 的 Webpack 配置

預設 webpack 配置的唯一缺點是它做了很多假設。一些 React 開發人員想要更改 create-react-app 的預設 webpack 配置。

預設情況下，啟動專案在內部處理外部模組和庫，因此 package.json 檔案看起來很乾淨。

此預設行為很有用，但有時最好顯示有關模組的完整資訊。這就是 npm run eject 的用武之地。

如果你執行這個命令，關於你所有模組的資訊將在 package.json 中可用。執行此命令是編輯應用程式的 webpack 配置所必需的。

除非你知道自己在做什麼，否則執行 npm run eject 可能會有很大風險。但是，可以在不彈出應用程式的情況下更改應用程式的 webpack 配置。

為此，你可以使用名為 react-app-rewired 的庫。要獲取有關該庫的更多資訊，請閱讀官方文件。