Webpack中@types别名路径无法解析的问题排查

核心原因 #

@types 这个别名前缀在 TypeScript 中有特殊内置逻辑——TypeScript 会优先从 node_modules/@types 目录加载第三方类型定义，你的自定义 @types 别名被这个内置行为覆盖，导致 TS 不会解析你配置的 src/types 路径。

解决方案 #

方案1：修改别名名称（推荐） #

直接更换自定义别名的命名，避开和内置 @types 的冲突，比如改成 @local-types 或 @src-types：

• 更新 webpack.config.js 的别名配置：

...
alias: {
 '@src': paths.src,
 '@local-types': resolve(paths.src, 'types'), // 替换原@types别名
 '@assets': resolve(paths.src, 'assets'),   
 '@components': resolve(paths.src, 'presentation/components'),
},
...

• 同步更新 tsconfig.json 的 paths：

...
"paths": {
  "@src/*": ["src/*"],
  "@local-types/*": ["src/types/*"], // 对应修改后的别名
  "@assets/*": ["src/assets/*"],
  "@components/*": ["src/presentation/components/*"]
}
...

• 导入语句改为：

import type { Podcast } from '@local-types/podcasts';

方案2：调整 TypeScript 的类型根目录优先级 #

通过 tsconfig.json 的 typeRoots 配置，强制让 TS 优先加载你自定义的类型目录：

...
"typeRoots": [
  "./src/types", // 优先查找自定义类型目录
  "./node_modules/@types" // 再查找第三方类型定义
],
"paths": {
  "@src/*": ["src/*"],
  "@types/*": ["src/types/*"],
  "@assets/*": ["src/assets/*"],
  "@components/*": ["src/presentation/components/*"]
}
...

注意：这个方案可能导致如果 src/types 下存在和 node_modules/@types 同名的包，会覆盖第三方类型定义，需谨慎使用。

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