如何使Webpack的SourceMap指向原始文件

Question

我正在尝试调试一个使用Webpack构建、使用VSCode编写的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 configuration:

{
  "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中映射到本地资源。

- Gabriel

---

这是一个适用于 React 的配置（仅限 JS，不包含 TS）：https://github.com/skolmer/react-hot-boilerplate-vscode - Steffen

Answer 1

我修改了这个：

我改变了这个：

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

转换为：

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

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

- robrich

Answer 2

感谢Rob Lourens，这个问题是由文件路径中的空格和其他特殊字符可能会破坏源映射所引起的。

- Gabriel

---

那么，这个问题解决了吗？有没有其他人可以学习并调整他们的项目的工作示例？ - e-cloud

@SaintScott，你看过这个问题了吗？它对我很有帮助：https://github.com/AngularClass/angular2-webpack-starter/issues/144#issue - Gabriel