我正在尝试调试一个使用Webpack构建、使用VSCode编写的Angular 2应用程序。我能够使用VSCode中的Chrome扩展程序调试器附加我的应用程序,也成功打断点在已编译的JS文件中。但是它无法找到源映射文件。
然后所有文件似乎都映射到原始ts文件的绝对路径。在Chrome开发者工具中,它看起来像这样:
但是Chrome和VSCode都表示此file://中的文件与原始ts文件不同。因此,我想知道是否有一种方法可以在webpack的配置中使*.js文件的源映射到原始ts文件。以下是我的所有配置:typescript configuration:
似乎Webpack会使用webpack://来托管*.js文件所指向的文件,就像图片中显示的那样:
我可以在Webpack文件夹内部的ts文件中设置断点。然而,VSCode无法找到ts文件。所以我更改了Webpack的配置:
output: {
path:root('__build');
devtoolModuleFilenameTemplate: function(info){
return "file:///"+info.absoluteResourcePath;
}
},
然后所有文件似乎都映射到原始ts文件的绝对路径。在Chrome开发者工具中,它看起来像这样:
![enter image description here](https://istack.dev59.com/WMU9C.webp)
{
"compilerOptions": {
"outDir": "dist",
"target": "ES5",
"module": "commonjs",
"sourceMap": true
}
}
Webpack 配置:
{
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://映射到此文件夹,则实际上可以在这些文件中设置断点。因此,我想知道是否有一种方法可以在VS Code中映射到本地资源。