Babel7 + ts-loader生成错误Source Maps问题咨询

我之前也碰到过一模一样的坑！这种情况基本是因为Babel、ts-loader和webpack三者的sourcemap配置没有协同起来，导致最终生成的sourcemap是基于Babel编译后的JS文件，而非你的原始TS/TSX文件。给你几个关键的调整步骤，按顺序排查：

1. 确保tsconfig.json开启Source Map #

首先检查你的tsconfig.json，必须开启sourceMap选项，让TypeScript生成原始文件的sourcemap：

{
  "compilerOptions": {
    "sourceMap": true,
    // 其他编译配置...
  }
}

2. 调整ts-loader的配置 #

在webpack的module规则里，给ts-loader开启sourceMap，并且不要用transpileOnly（如果开启了的话会跳过类型检查，同时可能不生成完整的sourcemap）：

module.exports = {
  // ...其他webpack配置
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: [
          // 注意loader顺序：webpack从右往左执行，所以ts-loader先处理，再传给babel-loader
          'babel-loader',
          {
            loader: 'ts-loader',
            options: {
              sourceMap: true, // 强制生成TS文件的sourcemap
              transpileOnly: false, // 关闭快速编译，确保生成完整sourcemap
            },
          },
        ],
        exclude: /node_modules/,
      },
    ],
  },
};

3. 配置babel-loader复用TS生成的Source Map #

Babel默认会重新生成自己的sourcemap，覆盖掉TS的结果，所以必须开启inputSourceMap让它基于TS的sourcemap来生成最终映射，同时开启sourceMaps：

// 在babel-loader的options里添加：
{
  loader: 'babel-loader',
  options: {
    presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript'],
    sourceMaps: true, // 开启sourcemap生成
    inputSourceMap: true, // 告诉Babel使用前一个loader（ts-loader）生成的sourcemap
  },
}

4. 设置webpack的devtool选项 #

webpack的devtool决定了最终sourcemap的生成方式，要选择能保留原始文件映射的选项：

• 开发环境：推荐用cheap-module-source-map，兼顾速度和原始映射；或者eval-source-map，热更新更快
• 生产环境：用source-map生成独立的.map文件，不会打包到JS里

module.exports = {
  // ...
  devtool: process.env.NODE_ENV === 'production' ? 'source-map' : 'cheap-module-source-map',
};

额外注意点 #

• 如果使用了fork-ts-checker-webpack-plugin，要确保插件的async设为false，或者同步生成sourcemap，避免冲突
• 不要同时开启多个loader的sourcemap选项却不协同，比如只开了Babel的sourcemap但没开TS的，肯定会指向编译后的文件

我当时就是把inputSourceMap设为true之后就解决了问题，你按这个顺序调整配置，应该就能看到调试工具里指向你原始的TS文件了！

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