React-app-rewired下带描述性文件名的Webpack别名无法生效问题

架构老林

2026-8-18

解决React App Rewired别名无法解析带自定义后缀文件的问题

问题根源

Create React App默认的Webpack配置中，resolve.extensions只包含.ts、.tsx、.js这类基础扩展名。当你用别名引用home.component.tsx、configuration.slice.ts这类带中间标识的文件时，Webpack不会自动尝试匹配这些复合扩展名组合，导致解析失败。VS Code能正常识别是因为它的文件解析逻辑和Webpack不同，会自动查找对应前缀的文件。

解决方案

在config-overrides.js里，除了配置别名，还要通过addWebpackResolve扩展Webpack的扩展名解析列表，把项目里用到的所有复合后缀都加进去。

修改后的配置示例

const { override, addWebpackAlias, addWebpackResolve } = require('customize-cra');
const path = require('path');

module.exports = override(
  // 原有别名配置
  addWebpackAlias({
    '@pages': path.resolve(__dirname, 'src/pages'),
    '@store': path.resolve(__dirname, 'src/store'),
    // 其他别名...
  }),
  // 添加自定义扩展名解析
  addWebpackResolve({
    extensions: [
      '.ts', '.tsx',
      '.component.ts', '.component.tsx',
      '.slice.ts', '.slice.tsx',
      // 根据项目实际情况添加其他自定义后缀组合
    ]
  })
);