在 Create React App 中修改 Webpack 設定，以調整 Webpack Alias 為例

前言

Create React App(CRA) 是一個可以快速建立一個 React 專案的工具，在建立該專案後就自動幫你將 babel、webpack 這些東西幫你預先配置並封裝好了。但如果要去修改預先配置好的 webpack 設定該怎麼做呢?

本文將會介紹修改 webpack 的方法以及實際舉一個修改的例子，使用 Webpack Alias，讓開發者在引入模組時可以不用再計算要寫 ../../../ 這些東西。

// relative path
import config from '../config/config.js'
// 使用 Alias
import config from 'Config/config.js'

修改方式

主要有三個方式，我會以第三個方式去做舉例。

1. npm run eject

在 CRA 專案在 package.json 的 script 部分有提供了一個指令："eject": "react-scripts eject"

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

config
├── env.js
├── jest
│   ├── cssTransform.js
│   └── fileTransform.js
├── paths.js
├── polyfills.js
├── webpack.config.dev.js
├── webpack.config.prod.js
└── webpackDevServer.config.js

2. 調整 react-scripts

react-scripts 包括了 CRA 的一些配置檔案，webpack 的設定也包含在內，從 react-scripts 內進入到 config 資料夾，就可以看到 webpack.config.js 檔案並去做調整。

3. 使用 react-app-rewired

若不想使用以上兩種方式的話，可以透過 react-app-rewired 套件去針對 CRA 的設定去做改寫，在安裝這個套件後我們在根目錄建立 config-overrides.js

/* 安裝 */
npm install react-app-rewired --save-dev
/* 以下是 config-overrides.js 的程式碼 */
module.exports = function override(config, env) {
  //do stuff with the webpack config...
  return config;
}

以先前提到的 Webpack Alias 為例，將 config-overrides.js 修改成以下這樣:

最後調整一下 package.json 就完成調整了，再也不用寫一堆 ../../../ 了XD

/* package.json */
  "scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test",
+   "test": "react-app-rewired test",
    "eject": "react-scripts eject"
}

其他閱讀: 讓vscode讀懂alias path

文章雖不長但如果有幫助到讀者的話那就太好了，歡迎鼓掌支持一下喔!