google-chrome – 如何将webpack源码映射到原始文件

2023年10月6日 547次阅读

我正在尝试使用VScode从webpack调试用Angular 2构建的应用程序.我可以在VSCode中使用调试器进行chrome扩展来附加我的应用程序.它确实达到了编译的js文件的断点.但它无法找到源图文件.

似乎webpack将有一个webpack：//来托管* .js文件指向的文件,如图中所示：
《google-chrome – 如何将webpack源码映射到原始文件》

我可以在webpack文件夹中的ts文件中设置断点.但是vscode无法找到ts文件.所以我将webpack的配置更改为

output: {
  path:root('__build');
  devtoolModuleFilenameTemplate: function(info){
    return "file:///"+info.absoluteResourcePath;
  }
},

然后所有文件似乎都映射到原始ts文件的绝对路径.在chrome开发人员工具中,它看起来像这样：

《google-chrome – 如何将webpack源码映射到原始文件》

但chrome和vscode都说这个文件中的文件：//与原来的ts文件不同.所以我想知道是否有一种方法可以在webpack的配置中将* .js文件源映射到原始ts文件.这是我的所有配置：

打字稿配置：

{
  "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：//映射到此文件夹,我实际上可以在这些文件中设置断点.所以我想知道有一种方法可以映射到vscode中的本地资源.

最佳答案 我改变了这个：

output: {
  // ...snip...
  devtoolModuleFilenameTemplate: function(info){
    return "file:///"+info.absoluteResourcePath;
  }
},

对此：

output: {
  // ...snip...
  devtoolModuleFilenameTemplate: function(info){
    return "file:///"+encodeURI(info.absoluteResourcePath);
  }
},

现在它正确编码空间,源图文件按预期工作.

点赞