2022年如何在CRA TypeScript中配置路径别名？

问题根源 #

1. 手动创建的webpack.config.js不会被CRA识别——CRA默认封装了webpack配置，仅在暴露配置后才能修改。
2. 原有tsconfig.json的paths配置存在冗余，可简化优化。

步骤1：修正tsconfig.json配置 #

修改项目根目录下的tsconfig.json，调整compilerOptions中的baseUrl和paths：

{
  "compilerOptions": {
    // 保留其他原有配置
    "baseUrl": "./src",
    "paths": {
      "@components/*": ["components/*"],
      "@utils/*": ["utils/*"]
    }
  }
}

• baseUrl设为./src后，所有别名路径均基于src目录，无需额外前缀。
• 配置@components/*后，即可用import Button from '@components/Button'导入src/components/Button组件。

步骤2：暴露CRA的webpack配置（不可逆操作） #

执行命令将CRA封装的配置暴露出来：

npm run eject
# 或使用yarn
yarn eject

执行后项目会生成config和scripts目录，包含可编辑的webpack配置文件。

步骤3：修改webpack别名配置 #

打开config/webpack.config.js，找到resolve.alias区块，添加自定义别名：

const path = require('path');

module.exports = function (webpackEnv) {
  // 保留其他原有代码
  return {
    // 保留其他原有配置
    resolve: {
      // 保留其他原有配置
      alias: {
        // 保留原有默认别名（如'react-native$': 'react-native-web'）
        '@components': path.resolve(__dirname, '../src/components'),
        '@utils': path.resolve(__dirname, '../src/utils'),
      },
    },
    // 保留其他原有配置
  };
};

• 注意路径：因webpack.config.js位于config目录，需用../src/components指向根目录的src/components。
• webpack别名无需通配符，配置根目录后自动支持子路径解析。

步骤4：重启开发服务器 #

停止当前运行的开发服务，重新启动以加载新配置：

npm start

内容的提问来源于stack exchange，提问作者mnrendra