Webpack打包ES模块TypeScript时路径别名解析失败求助

针对你遇到的ES模块环境下TsconfigPathsPlugin无法解析@/modules/index.js这类带.js扩展名的别名路径问题，以下是几个针对性的解决方案：

1. 明确指定TsconfigPathsPlugin的配置参数 #

因为你的tsconfig.json在/source目录下，且当前是ES模块环境，必须给插件指定正确的配置文件路径和要处理的扩展名：

import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';

export default {
  // ...其他Webpack配置
  resolve: {
    plugins: [
      new TsconfigPathsPlugin({
        configFile: './source/tsconfig.json', // 指向你的tsconfig文件
        extensions: ['.js', '.ts', '.tsx'], // 明确列出需要处理的扩展名，包含.js
        baseUrl: './source' // 可选，和tsconfig里的baseUrl保持一致
      })
    ]
  }
};

ES模块模式下，Webpack对文件扩展名的校验更严格，插件默认的扩展名列表可能不包含.js，导致无法匹配你引用的带.js后缀的路径。

2. 确保tsconfig的paths配置正确 #

检查/source/tsconfig.json里的baseUrl和paths是否匹配你的目录结构，比如：

{
  "compilerOptions": {
    "baseUrl": "./", // 相对于当前tsconfig文件的路径，即/source目录
    "paths": {
      "@/*": ["*"] // 这样@/modules会映射到/source/modules
    },
    // ...其他编译配置
  }
}

如果你的modules目录在/source/src下，就要把paths改成"@/*": ["src/*"]，保证别名能正确映射到实际文件目录。

3. 同步Webpack的resolve.extensions配置 #

在Webpack的resolve配置里，确保包含你用到的所有扩展名，避免因扩展名缺失导致的解析失败：

export default {
  resolve: {
    extensions: ['.js', '.ts', '.json'], // 按优先级排列，包含.js
    plugins: [
      // ...TsconfigPathsPlugin配置
    ]
  }
};

4. 启用插件的debug模式排查问题 #

如果以上配置都没问题，开启插件的debug模式，查看实际的路径解析过程：

new TsconfigPathsPlugin({
  configFile: './source/tsconfig.json',
  extensions: ['.js', '.ts'],
  debug: true // 开启debug
})

打包时会在控制台输出插件解析别名的详细日志，你可以根据日志确认@/modules/index.js是否被正确映射到了对应的本地文件路径。

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