Webpack打包时如何让Sourcemap映射回原始TypeScript文件而非*.obf.ts？

1. 确保第一步编译生成完整关联的Sourcemap #

第一次将原始TS编译为*.obf.ts时，必须生成包含原始文件路径的sourcemap。以tsc编译为例，调整tsconfig.json：

{
  "compilerOptions": {
    "sourceMap": true,
    "inlineSourceMap": false, // 生成独立的*.obf.ts.map文件，不要内嵌
    "outDir": "./dist/obf" // 指定输出目录，确保obf文件和map文件对应
  }
}

验证生成的*.obf.ts.map中，sources字段是否正确指向原始TS文件路径。

2. Webpack核心配置调整 #

2.1 前置加载source-map-loader #

source-map-loader必须在ts-loader之前执行，用于读取*.obf.ts对应的sourcemap，将原始文件映射注入webpack的sourcemap链：

module.exports = {
  // ...其他基础配置
  module: {
    rules: [
      {
        test: /\.obf\.ts$/,
        enforce: 'pre', // 强制前置执行，确保先加载sourcemap
        use: ['source-map-loader'],
        exclude: /node_modules/
      },
      // 处理obf.ts文件的loader链
      {
        test: /\.obf\.ts$/,
        use: [
          // 配置babel-loader
          {
            loader: 'babel-loader',
            options: {
              sourceMaps: 'both', // 继承上游sourcemap并生成自身的sourcemap
              presets: [/* 你的babel预设配置 */]
            }
          },
          // 配置ts-loader
          {
            loader: 'ts-loader',
            options: {
              useExistingSourceMap: true, // 关键：复用输入文件已有的sourcemap，而非重新生成
              compilerOptions: {
                sourceMap: true, // 允许生成sourcemap
                inlineSourceMap: false
              },
              transpileOnly: false // 关闭仅转译模式，确保类型检查不影响sourcemap链
            }
          }
        ]
      }
    ]
  },
  // 3. 设置Webpack的devtool类型
  devtool: 'source-map', // 生产环境用source-map；开发环境可改用eval-source-map，需确保完整映射
  // 禁用可能干扰sourcemap的缓存配置（若有）
  cache: {
    type: 'filesystem',
    buildDependencies: {
      config: [__filename]
    }
  }
};

3. 关键配置说明 #

• source-map-loader的enforce: 'pre'是核心，确保先加载obf文件的sourcemap，让后续loader能获取原始文件的映射信息。
• ts-loader的useExistingSourceMap: true会让工具复用输入的sourcemap，而非生成仅指向*.obf.ts的新map。
• babel-loader的sourceMaps: 'both'保证sourcemap链不中断，既继承上游信息，又生成自身转译后的map。
• 避免使用cheap-*系列devtool，这类模式会丢失原始文件的映射细节。

4. 验证方法 #

打包完成后，在浏览器开发者工具的Sources面板中，检查是否能看到原始TS文件而非仅*.obf.ts；也可直接查看最终生成的*.js.map文件，确认sources字段包含原始TS文件路径。

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