設定檔都封裝在 react-scripts 套件中

打開使用 CRA 建立的 React 專案可以發現，完全找不到 webpack.config.js 的存在。因為 CRA 已經幫你把它封裝起來了。

我們在 npm start 運行的是 react-scripts 這個套件

這個套件其實就包含了，React 專案預設要使用的設定檔及運行時要用的指令。

如何修改預先配置好的 Webpack 設定

主要有幾個方式

調整 react-scripts

直接去node_modules底下，找到react-scripts中的config資料夾去下修改。

但缺點就是無法被版控，每次重新拉專案做 npm install 後就要手動調整一次，更不適合專案使用 CICD 的流程運行 DevOps 的狀況下。

npm run eject

CRA 專案在 package.json 的 script 部分有提供了一個指令：

"eject": "react-scripts eject"

使用這個指令後會將原本封裝在 CRA 的一些配置檔案都集中呈現在根目錄的 config 資料夾，就可以從這邊去調整 Webpack。執行後的目錄變化如下圖

但使用此方法的缺點就是無法享受 CRA 升級的好處，因為原本設定檔是放在 react-scripts 套件下，所以新版本升級時只需要升級套件就可以了，但被抽到專案下的話，未來升級就要自行維護設定檔。

使用 react-app-rewired

若不想使用以上兩種方式的話，可以透過 react-app-rewired 套件去針對 CRA 的設定去做改寫，它是 React 社群開源的修改 CRA 配置的工具，這種方式讓開發者既不用eject設定檔至專案，也不用手動調整 react-scripts 套件就可以調整 Webpack 設定。

以下是使用 react-app-rewired 的設置流程

1. 在 CRA 建立的專案中安裝 react-app-rewired

npm install react-app-rewired --save-dev

2. 在根目錄中創建一個 config-overrides.js 檔案

/* config-overrides.js */

module.exports = function  override(config, env){
  // 參數中的config 就是預設的 webpack config
  
  // 對config 進行修改
  config.mode = 'development';
  
  ...
  // do stuff with the webpack config...  
  
  // 最後一定要 Return 新的 Config
  return config;
}

編譯時，react-app-rewired 會先取到 CRA 預設的 Webpack config，然後使用 override(config) 方法，對 config 進行修改，得到新的 Webpack config。Webpack 最終會使用這個新的config 進行打包。

3. 替換 package.json 中 scripts 執行部分，把 react-scripts 修改為 react-app-rewired

4. 啟動專案 npm start

5. 建置專案 npm run build

customize-cra

react-app-rewired 的原生寫法，對webpack config 的修改全部寫在 override() 方法中，不夠模組化。customized-cra 提供了一些 helper 方法，可以將每一個獨立的修改放到單獨的函數中，再串接執行這些函數。

customize-cra 依賴於 react-app-rewired 套件，也是通過 config-overrides.js 來修改 CRA 原生的配置設定。

如同使用 react-app-rewired 的設置流程一樣，只是步驟一和二的做法稍微不同

1. 在 CRA 建立的專案中安裝 react-app-rewired 及 customize-cra

npm install react-app-rewired customize-cra --save-dev

2. 在根目錄中創建一個 config-overrides.js 檔案，然後使用 customize-cra 的 helper function 修改 Webpack Config

/* config-overrides.js */

const {
  override,
  addDecoratorsLegacy,
  disableEsLint,
} = require("customize-cra");
const path = require("path");
 
module.exports = override(
  // helper function - enable legacy decorators babel plugin
  addDecoratorsLegacy(),

  // helper function - disable eslint in webpack
  disableEsLint(),
    
  ...
    
  // 注意這裡的 override 的傳參變成了 helper-fn，且用,做串連
  // 這裡也不用 return config
  // 因為每個 helper-fn 預設都隱含 return 了 newConfig
);

Next

如果我們想在建置專案時，就指定我們需要的版型，而不需手動做額外的設定。接下來就要來介紹 使用 Create React App 的 Template。

Reference

https://github.com/timarney/react-app-rewired

https://github.com/arackaf/customize-cra

https://snh90100.medium.com/%E5%9C%A8-create-react-app-%E4%B8%AD%E4%BF%AE%E6%94%B9-webpack-%E8%A8%AD%E5%AE%9A-%E4%BB%A5%E8%AA%BF%E6%95%B4-webpack-alias-%E7%82%BA%E4%BE%8B-59fd9eeeffe7

https://segmentfault.com/a/1190000039850941