(在某种程度上与to this 相关,但更具体针对VsCode )
我正在尝试使用visual studio代码调试the AngularU starter kit。 但它将单个bundle.js中的ts输出与side.js.map 合并:
↳web
↳dist
↳client
↳server
⇒bundle.js
⇒bundle.js.map
↳src
⇒server.ts
⇒client.ts
当我尝试运行它时,我从VS UI收到错误:
request 'launch': cannot launch program '/home/.../web/src/server.ts'; setting the 'outDir' attribute might help
当输出文件未合并时,outDir 在我的其他项目(不使用webpack)上正常工作,但在这里它没有帮助。很确定他正在寻找server.js(但只有一个bundle.js及其地图文件)。
生成的单个文件输出是否有任何outFile选项?
我的launch.json:
{
"name": "WebServer",
"type": "node",
"request": "launch",
"program": "./web/src/server.ts",
"stopOnEntry": false,
"args": [],
"cwd": "./web",
"runtimeExecutable": null,
"runtimeArgs": [
"--nolazy"
],
"env": {
"NODE_ENV": "development"
},
"externalConsole": false,
"sourceMaps": true,
"outDir": "./web/dist/server"
}
编辑:当我将webpack服务器输出重命名为 server.js 和 server.map.js (而不是捆绑包)时,它会运行。*),但遗憾的是断点不起作用:
Here is the content of the server.js.map file.
TS编译器和Webpack都配置为根据this tutorial创建源映射。
我错过了什么吗?
EDIT2 :带有断点的问题似乎是地图文件中的源URI。
当我转过来
"webpack:///./src/server.ts",
进入这个
"../../src/server.ts",
断点正在发挥作用。
答案 0 :(得分:16)
以下是我如何使其发挥作用:
VsCode至少为1.1.0(较旧的将与sourceRoot相悖)
将捆绑文件设置为与webpack.config.js中的父目录相同的名称
output: {
path: path.join(__dirname, 'dist', 'server'),
filename: 'server.js'
},
并将父目录设置为' outdir'在launch.json中:
...
"sourceMaps": true,
"outDir": "${workspaceRoot}/dist/server",
"smartStep":true
要求webpack在webpack.config.json中输出sourcemap的绝对路径
output : {
...
devtoolModuleFilenameTemplate : '[absolute-resource-path]',
devtoolFallbackModuleFilenameTemplate: '[absolute-resource-path]?[hash]'
}