我尝试使用VScode调试使用webpack编写的Angular 2构建的应用程序。我可以在VSCode中使用调试器进行chrome扩展来附加我的应用程序。它确实达到了编译的js文件的断点。但它无法找到源图文件。
似乎webpack将有一个webpack://来托管* .js文件所指向的文件,如图中所示:
我可以在webpack文件夹中的ts文件中设置断点。但是vscode无法找到ts文件。所以我将webpack的配置更改为
output: {
path:root('__build');
devtoolModuleFilenameTemplate: function(info){
return "file:///"+info.absoluteResourcePath;
}
},
然后所有文件似乎都映射到原始ts文件的绝对路径。在Chrome开发人员工具中,它看起来像这样:
但chrome和vscode都说这个文件中的文件://与原来的ts文件不同。因此,我想知道在webpack的配置中是否可以将* .js文件源映射到原始ts文件。以下是我的所有配置:
打字稿配置:
{
"compilerOptions": {
"outDir": "dist",
"target": "ES5",
"module": "commonjs",
"sourceMap": true
}
}
webpack config:
{
entry: "./src/app/bootstrap",
output: {
path: root('__build__'),
filename: env({
'development': '[name].js',
'all': '[name].[hash].min.js'
}),
devtoolModuleFilenameTemplate: function(info){
return "file:///"+info.absoluteResourcePath;
}
},
devtool:'source-map',
devServer: {
contentBase: "public/"
}
}
另一件事是,如果在chrome开发人员工具中,如果我将原始文件添加到工作区并将文件从file://映射到此文件夹,我实际上可以在这些文件中设置断点。所以我想知道在vscode中映射到本地资源的方法。
答案 0 :(得分:4)
我改变了这个:
output: {
// ...snip...
devtoolModuleFilenameTemplate: function(info){
return "file:///"+info.absoluteResourcePath;
}
},
到此:
output: {
// ...snip...
devtoolModuleFilenameTemplate: function(info){
return "file:///"+encodeURI(info.absoluteResourcePath);
}
},
现在它正确编码了空格,并且源图文件按预期工作。
答案 1 :(得分:-2)
感谢Rob Lourens,此问题是由文件路径中的空格和其他特殊字符引起的,这些字符可能会破坏源映射。