好吧，筆者是一個后端開發。以前是做C/S項目出身，毫無Web前端基礎，為了更好地理解Web開發，去年開始嘗試使用公司使用的前端框架React來搭建團隊內部使用的系統。通過這個項目的開發，也讓我更好地理解了前端同事的不容易，更加堅定了寫好接口文檔的決心。

最近在把自己做的這個內部系統遷移到公司的統一平臺的時候，遇到了一個小問題，公司要求打包的目錄名必須為dist，而我這個項目是使用create-react-app搭建的，所以打包的目錄是默認的build。

遂開始了查找如何修改打包目錄的資料。隨便在網上一搜，便是如下的解決方案：

使用eject命令暴露配置，然后修改打包地址

使用這個命令，是不可逆的，執行之前，請將代碼備份或提交版本庫

1、使用eject命令暴露配置：

npm run eject

2、修改暴露出的配置文件config/path.js，將appBuild修改為需要輸出的位置。

3、使用npm install命令安裝依賴，然后執行npm run build打包

這個方案當然一點毛病都沒有，通過這個可以認識到，create-react-app在創建React項目的時候，是隱藏了許多開發者不需要過多關心的配置項的，盡量簡化了前端的開發。而eject命令則可以讓這些配置項暴露出來。

eject的弊端

要注意的是，eject命令是不可逆的（至少官方沒有提供回退的方法）。使用了這個命令，你就要接受你的開發目錄面多了很多的配置文件和腳本。

這還不是最關鍵的，因為我的項目使用了antd作為UI框架，其使用了react-app-rewired這個東東，導致我在eject之后執行npm run build會報錯。

react-app-rewired是什么？

作為一個后端開發，最大的感觸就是，前端的網上資料有用的太少，因為各種框架、技術更新迭代太快，很多博客上的解決方案都已經過時了。你們看到的我的這篇文章，可能很快也會過時，但是我會把思路教給大家——話說，當遇到一個技術問題，實在解決不了怎么辦？當然是找官方文檔了。

通過在react-app-rewired的官方文檔，才知道這個工具的一個功能是在不eject的情況下，修改配置文件。上文說到的antd也是為了實現修改配置，才引入的這個工具。既然它的功能如此，那么用來修改打包地址應該也是可行的。

使用react-app-rewired在不eject的情況下修改打包地址

思路雖然有了，但是對于前端基礎薄弱的后臺開發來說，還是不知道怎么實操，在看了幾篇issue之后，Changing the default paths，Change build output path之后，終于找到了方法。

首先當然是要引入react-app-rewired了，這里我就不寫方法了，大家參考官方文檔，不會過時。

引入之后，會有一個config-overrides.js文件，因為我引入了antd，里面已經有了些內容：