google-chrome - 如何将 webpack sourcemap 制作成原始文件

Question

我正在尝试使用 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都说这个file://里面的文件和原来的ts文件不一样。所以我想知道是否有一种方法可以在 webpack 的配置中将 *.js 文件源映射到原始 ts 文件。这是我所有的配置:

typescript 配置:

{
  "compilerOptions": {
    "outDir": "dist",
    "target": "ES5",
    "module": "commonjs",
    "sourceMap": true
   }
}

网络包配置:

{
  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 中的本地资源。

Answer 1

我改变了这个:

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

对此:

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

现在它正确编码了空格，源映射文件按预期工作。