在使用TypeScript和webpack的CRA项目中开启source mapping显示原文件

• 第一步：调整webpack的devtool配置
  开发环境当前使用的cheap-module-source-map仅能映射到经过loader转换后的代码，无法对应到原始的TS/TSX源文件，将开发环境devtool修改为source-map即可支持原始源文件映射，修改后配置如下：

devtool: isEnvProduction
  ? shouldUseSourceMap
    ? 'source-map'
    : false
  : isEnvDevelopment && 'source-map',

如果觉得source-map编译速度偏慢，也可以替换为eval-cheap-module-source-map，兼顾编译速度和源文件映射能力。

• 第二步：给babel-loader开启sourcemap生成配置
  当前的babel-loader配置未显式开启sourcemap生成，无法将TS编译阶段生成的sourcemap向下传递给webpack做最终映射，修改babel-loader的options配置，增加sourceMaps: true字段：

use: {
  loader: "babel-loader",
  options: {
    presets: [
      "@babel/preset-env",
      "@babel/preset-react",
      "@babel/preset-typescript",
    ],
    sourceMaps: true
  },
}

• 第三步：确认tsconfig无冲突配置
  你当前的tsconfig已经开启了sourceMap: true，只需要确认没有同时开启inlineSourceMap、inlineSources这类会和webpack sourcemap逻辑冲突的配置即可，无需额外修改。

修改完成后重启开发服务，清除浏览器缓存后即可在控制台看到报错对应的原始TS/TSX源文件路径。

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