React 自定义打包 path 和 alias

本来是想使用 craco，但因为 react-scripts 版本是 5.0.0，craco 无法安装，因此只能使用 react-app-rewired 方案

1. 准备

安装

npm i react-app-rewired -D

npm i react-app-alias -D

2. 配置 config-overrides.js

在项目根目录下新增 config-overrides.js，添加如下内容：

const path = require('path');

const paths = require('react-scripts/config/paths');
const { aliasWebpack, configPaths} = require('react-app-alias')

module.exports = function override(config, env) {
  //do stuff with the webpack config...

  aliasWebpack(configPaths('./tsconfig.paths.json'))(config)

  // 修改打包目录
  paths.appBuild = path.join(path.dirname(paths.appBuild), 'dist');

  config.output.path = path.join(path.dirname(config.output.path), 'dist');

  return config;
}

3. 配置 package.json

{
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject",
  }
}