更改脚手架 webpack 配置

背景

项目使用脚手架 create-react-app 搭建的react工程。在这个工程里，webpack配置本身并没有暴露出来。这时候需要配置别名 alias ，用来定义引用路径，而不用一层一层用相对路径。而定义 alias，一般是在 webpack.config.js 配置里编写。但现在问题是该文件未暴露给开发

方案一：eject 配置

通过 npm run eject 将 webpack 的配置 eject 出来，然后在里面修改。该过程不可逆，这么才做后会失去 react-scripts 的统一管理，而且相关配置非常多

方案二：使用 customize-cra 覆写配置(采用)

1. 安装

npm i customize-cra react-app-rewired --D

2. 改写scripts，使用 react-app-rewired 代替 react-scripts

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

3. 项目根目录下增加 config-overrides.js，并加入自定义配置

// config-overrides.js
const { override, addWebpackAlias } = require("customize-cra");
const path = require('path');

module.exports = override(
  addWebpackAlias({
   '@': path.resolve(__dirname, './src'),
  })
);

4. 修改 jsconfig/ tsconfig 等 VSCODE 会读取 jsconfig 配置，现在它不知道 @ 是什么

// jsconfig.js
{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

5. 重启

方案三：使用 @craco/craco 覆盖配置

和方案2差不多

1. 安装

npm i @craco/craco -D

2. 改写scripts

// package.json
"scripts": {
  "start": "craco start",
  "build": "craco build",
  ...
}

3. 增加 craco.config.js

// craco.config.js
const path = require('path')

module.exports = {
  webpack: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
}

4. 修改 jsconfig/tsconfig 等
5. 重启