作為前端開(kāi)發(fā)，基本會(huì)使用CRA創(chuàng)建react項(xiàng)目，但是你會(huì)發(fā)現(xiàn)，webpack是被隱藏的，如果說(shuō)我們想添加配置，該如何操作呢？

第一種方案： 執(zhí)行命令 ：npm run eject

我們知道，這個(gè)命令不不可逆的，就是執(zhí)行后，你回不去了...
還有就是如果我們只需要修改極少的 webpack 配置也是沒(méi)有必要使用，
實(shí)際上react已經(jīng)主動(dòng)加入了很多我們經(jīng)常用到的東西，比如：babel編譯，sass以及一些常用的插件。
建議是你發(fā)現(xiàn)問(wèn)題的時(shí)候，再去額外進(jìn)行添加。

第二種方案：使用 react-app-rewired和customize-cra來(lái)自定義 create-react-app 的 webpack 配置。

使用customize-cra 的好處就是可以不用執(zhí)行npm run eject而進(jìn)行修改 webpack 配置。

步驟一、 安裝依賴
npm i customize-cra react-app-rewired --dev

步驟二、修改根目錄下 package.json 文件

image

步驟三、在項(xiàng)目根目錄下添加 config-overrides.js 文件。在該文件中配置 webpack。

image

注意：步驟三中的只是一個(gè)用法示例，至于 override 中的其他API， 請(qǐng)參與 API doc，若要查看我的其他 用法示例請(qǐng)參閱文章：在 create-react-app 中引入 Tailwind CSS。