如何配置Webpack转换依赖项目的tsconfig路径

问题场景 #

在包含app（/workspace/app）和component（/workspace/component）的monorepo工作区中：

• app子工作区的tsconfig.json通过paths配置将@lib/component映射到../component，方便直接引用组件库代码
• component子工作区的tsconfig.json则将@/*映射到./src/*，简化内部模块引用

直接用Webpack编译整个项目时，Webpack要么忽略component的tsconfig配置，要么无法解析component/src中使用的@/xxx路径，最终导致编译失败。已知子工作区独立转译时，通过ts-patch搭配typescript-transform-paths插件可完成路径转换，以下是Webpack直接处理时的配置方案。

方案1：基于ts-loader + typescript-transform-paths实现 #

该方案延续独立转译时的插件逻辑，在Webpack编译流程中集成路径转换：

1. 安装依赖：在根工作区或component子工作区安装所需插件

# 根工作区全局安装（推荐monorepo场景）
npm install typescript-transform-paths ts-patch -D -W
# 或仅在component子工作区安装
cd /workspace/component && npm install typescript-transform-paths ts-patch -D

2. 配置component的tsconfig：在component/tsconfig.json中添加插件声明

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    },
    "plugins": [
      { "transform": "typescript-transform-paths" }
    ]
  }
}

3. 修改app的Webpack配置：让ts-loader根据文件所属工作区加载对应tsconfig，并注入路径转换插件

// /workspace/app/webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: [
          {
            loader: 'ts-loader',
            options: {
              // 为不同工作区的文件加载对应tsconfig
              configFile: (filePath) => {
                return filePath.includes('/workspace/component/')
                  ? '/workspace/component/tsconfig.json'
                  : '/workspace/app/tsconfig.json';
              },
              // 注入typescript-transform-paths转换逻辑
              getCustomTransformers: (program) => {
                const transformPaths = require('typescript-transform-paths').default;
                return { before: [transformPaths(program)] };
              }
            }
          }
        ],
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js']
  }
};

方案2：基于babel-loader + babel-plugin-module-resolver实现 #

如果项目使用Babel处理TypeScript，可通过该插件实现路径映射转换：

1. 安装依赖：在根工作区或对应子工作区安装插件

npm install babel-plugin-module-resolver -D -W

2. 配置component的Babel：在component/.babelrc或babel.config.json中添加别名配置

{
  "plugins": [
    [
      "module-resolver",
      {
        "root": ["./src"],
        "alias": {
          "@": "./src"
        }
      }
    ]
  ]
}

3. 修改app的Webpack配置：让babel-loader根据文件路径加载对应Babel配置

// /workspace/app/webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: {
          loader: 'babel-loader',
          options: {
            configFile: (filePath) => {
              return filePath.includes('/workspace/component/')
                ? '/workspace/component/.babelrc'
                : '/workspace/app/.babelrc';
            }
          }
        },
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js']
  }
};

关键注意事项 #

• 必须确保Webpack根据文件所属工作区加载对应配置文件，避免全局使用单一配置导致子工作区路径失效
• 热模块重载（HMR）无需额外特殊配置，只要路径转换正确，Webpack会自动监听转换后的依赖文件
• 使用pnpm等严格隔离的包管理器时，需确保插件依赖被正确安装到对应工作区，避免依赖提升导致的插件找不到问题

内容的提问来源于stack exchange，提问作者D-Y