Webpack打包后VS Code TypeScript插件无法绑定断点调试

关键配置修正步骤 #

1. 更新launch.json的outFiles路径 #

你的launch.json中outFiles仍指向旧的out文件夹，但Webpack已将产物打包到dist，需要修正路径：

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Run Extension",
            "type": "extensionHost",
            "request": "launch",
            "args": [
                "--extensionDevelopmentPath=${workspaceFolder}"
            ],
            "outFiles": [
                "${workspaceFolder}/dist/**/*.js" // 修改为dist路径
            ],
            "preLaunchTask": "${defaultBuildTask}"
        },
        {
            "name": "Extension Tests",
            "type": "extensionHost",
            "request": "launch",
            "args": [
                "--extensionDevelopmentPath=${workspaceFolder}",
                "--extensionTestsPath=${workspaceFolder}/dist/test/suite/index" // 若测试代码也用Webpack打包，同步修改这里
            ],
            "outFiles": [
                "${workspaceFolder}/dist/test/**/*.js" // 修改为dist下的测试文件路径
            ],
            "preLaunchTask": "${defaultBuildTask}"
        }
    ]
}

2. 调整Webpack的source map路径映射 #

当前devtoolModuleFilenameTemplate设置为../[resource-path]，可能导致VS Code无法正确解析源码位置，改为使用绝对路径模板：

output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'extension.js',
    libraryTarget: "commonjs2",
    devtoolModuleFilenameTemplate: "[absolute-resource-path]" // 替换为绝对路径模板
},

这个配置会让source map中的路径指向本地源码绝对路径，确保VS Code能准确找到对应的extension.ts文件。

3. 确认package.json的main字段指向打包产物 #

检查package.json中的main字段，必须设置为Webpack打包后的文件路径：

{
    "main": "./dist/extension.js"
}

如果仍指向./out/extension.js，VS Code会加载旧的编译产物，导致断点无法匹配。

4. 确保tsconfig.json开启sourceMap（可选但推荐） #

虽然Webpack已配置devtool: 'source-map'，但确保tsconfig.json中也开启source map，避免潜在的映射问题：

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

验证步骤 #

1. 执行Webpack打包命令，确认dist文件夹下生成extension.js和extension.js.map
2. 重新启动调试会话，尝试在extension.ts中设置断点
3. 若仍有问题，可尝试：
   • 删除dist和out文件夹，重新打包
   • 在VS Code中执行「开发者: 重新加载窗口」后再调试

内容的提问来源于stack exchange，提问作者Mauricio Gracia Gutierrez