[英]Debug webpack bundled node ts with Visual Studio Code
(In some way related to this but more specific to VsCode ) (在某种程度上与此相关但更具体到VsCode )
I m trying to debug the AngularU starter kit with visual studio code. 我试图使用visual studio代码调试AngularU入门套件 。 But it's merging the ts output inside a single bundle.js with a side bundle.js.map : 但是它将ts输出合并到一个bundle.js中,并带有一个bundle.js.map :
↳web
↳dist
↳client
↳server
⇒bundle.js
⇒bundle.js.map
↳src
⇒server.ts
⇒client.ts
When i try to run it im getting an error from VS UI: 当我尝试运行它时,我从VS UI收到错误:
request 'launch': cannot launch program '/home/.../web/src/server.ts'; setting the 'outDir' attribute might help
outDir works fine on my others projects (not using webpack) when output files are not merged, but here it doesnt help. OUTDIR工作在我的其他项目罚款(不使用的WebPack)时,输出文件不会被合并,但在这里它不帮助。 Pretty sure he is looking for server.js (but there is only a bundle.js and its map file). 很确定他正在寻找server.js(但只有一个bundle.js及其地图文件)。
Is there any outFile option for generated single file ouput? 生成的单个文件输出是否有任何outFile选项?
My launch.json: 我的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"
}
EDIT: It does run when i rename the webpack server output as server.js and server.map.js (instead of bundle.*), but the breakpoints are not working unfortunately: 编辑:当我将webpack服务器输出重命名为server.js和server.map.js (而不是bundle。*)时,它会运行,但不幸的是断点不起作用:
Here is the content of the server.js.map file. 这是server.js.map文件的内容。
Both TS compiler and Webpack are configured to create sourcemap according to this tutorial . 根据本教程, TS编译器和Webpack都配置为创建源映射。
Am i missing something? 我错过了什么吗?
EDIT2 : The probleme with breakpoints seems to be the sources URI in the map file. EDIT2 :带有断点的问题似乎是地图文件中的源URI。
When i turn this 当我转过身来
"webpack:///./src/server.ts",
into this 进入这个
"../../src/server.ts",
breakpoints are working. 断点正在发挥作用。
Here is how i make it work: 这是我如何使它工作:
Have VsCode atLeast 1.1.0 (older will struggle with sourceRoot) VsCode至少为1.1.0(较旧的将与sourceRoot一起使用)
Set the bundle file the same name as its parent directory in webpack.config.js 将bundle文件设置为与webpack.config.js中的父目录相同的名称
output: { path: path.join(__dirname, 'dist', 'server'), filename: 'server.js' },
and set the parent dir as 'outdir' in launch.json: 并在launch.json中将父目录设置为'outdir':
... "sourceMaps": true, "outDir": "${workspaceRoot}/dist/server", "smartStep":true
Ask webpack to output absolute path for sourcemap in webpack.config.json 让webpack在webpack.config.json中输出sourcemap的绝对路径
output : { ... devtoolModuleFilenameTemplate : '[absolute-resource-path]', devtoolFallbackModuleFilenameTemplate: '[absolute-resource-path]?[hash]' }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.