如何解决VS Code调试经Webpack打包的TypeScript代码时断点无法识别的问题？

从你的配置和描述来看，核心问题主要出在生产模式打包的代码压缩混淆，以及VS Code调试配置的细节优化上。我来一步步帮你排查解决：

一、生产模式打包的代码压缩是断点错位的元凶 #

你当前Webpack配置用的是mode: 'production'，生产模式下Webpack会自动开启代码压缩、变量混淆、Tree Shaking等优化，这些操作会彻底打乱源码的行号、变量名和结构，导致Source Map的映射关系变得非常复杂，VS Code的调试器根本无法准确对应到你在TS源码上设置的断点。

解决方法： #

修改webpack.config.js，优先切换到开发模式打包（调试阶段完全没必要用生产模式）：

// webpack.config.js
module.exports = {
  entry: './src/main.ts',
  mode: 'development', // 把production改成development
  // ... 其他配置不变
}

如果因为特殊需求必须用生产模式，那要手动关闭代码压缩：

// webpack.config.js
module.exports = {
  // ... 其他配置
  mode: 'production',
  optimization: {
    minimize: false, // 关闭代码压缩
    minimizer: [] // 清空默认的压缩插件
  }
}

二、优化VS Code的调试配置（launch.json） #

你的launch.json已经有了基础配置，但还有几个细节可以调整，让Source Map映射更准确：

修改后的完整launch.json： #

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Program",
      "program": "${workspaceFolder}/dist/bundle.js",
      "request": "launch",
      "type": "node",
      "outFiles": ["${workspaceFolder}/dist/**/*.js"],
      "sourceMaps": true,
      // 调整Source Map查找范围：包含项目所有文件，排除node_modules
      "resolveSourceMapLocations": [
        "${workspaceFolder}/**",
        "!**/node_modules/**"
      ],
      // 精准映射Webpack的虚拟路径到本地源码
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${workspaceFolder}/src/*"
      }
    }
  ]
}

关键调整点说明： #

1. 移除了runtimeArgs: ["--enable-source-maps"]：Node.js的这个参数和VS Code调试器的sourceMaps: true功能有重叠，反而可能导致映射冲突，调试阶段完全不需要加。
2. 扩大了resolveSourceMapLocations范围：确保调试器能找到所有项目内的Source Map文件，同时排除node_modules避免干扰。
3. 简化了sourceMapPathOverrides：只保留Webpack虚拟路径到本地src目录的映射，足够覆盖你的场景，多余的规则反而可能出问题。

三、最后一步：重新打包并验证 #

1. 运行Webpack重新打包：

node ./node_modules/webpack-cli/bin/cli.js

2. 确认dist目录下同时生成了bundle.js和bundle.js.map文件（后者是Source Map的核心文件，必须存在）。
3. 回到VS Code，在src/main.ts的代码行上设置断点（比如console.trace()那一行），按下F5启动调试，断点应该能准确命中了。

额外注意事项 #

• 不要在空行、注释或者被Tree Shaking移除的代码行设置断点，这类断点本身就不会被执行。
• 如果你后续调整了Webpack的output.publicPath，要同步更新sourceMapPathOverrides里的前缀，确保路径匹配。

内容来源于stack exchange