如何将webpack源映射制作为原始文件 [英] how to make webpack sourcemap to original files

问题描述

我正在尝试使用VScode从webpack调试用Angular 2构建编写的应用程序。我可以使用VSCode中的chrome扩展调试器来附加我的应用程序。而且确实达到了已编译js文件的断点。

I'm trying to debug an application written in Angular 2 build from webpack with VScode. I'm able to use the debugger for chrome extension in VSCode to attach my application. And it did hit the break point of the compiled js file. But it cannot find the sourcemap files.

似乎webpack会有一个webpack：//来托管* .js文件指向的文件，例如图片：

It seems that webpack will have a webpack:// to host the files which the *.js file pointed to, like in the image:

我可以在webpack文件夹内的ts文件中设置断点。但是，vscode无法找到ts文件。因此，我将webpack的配置更改为

And I can set the breakpoint inside the ts files inside webpack folder. However vscode is not able to find the ts files. So I change the configuration of webpack to

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

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

And then all files seemed to map to the absolute paths of the original ts files. And in chrome developer tool it looks like this:

但是chrome和vscode都表示此file：//中的文件与原始ts文件不同。因此，我想知道在webpack的配置中是否有一种方法可以使* .js文件源映射变为原始ts文件。这是我的所有配置：

But both chrome and vscode said the files inside this file:// is different from the original ts files. So I'm wondering whether there's a way that in webpack's configuration could make *.js file sourcemap to original ts files. And here's all my configurations:

打字稿配置：

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

webpack配置：

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

Another thing is that if in chrome developer tools, if I add the original files into the workspace and map the files from file:// to this folder, I can actually set breakpoints inside these files. So I'm wondering there's a way to map to local resources in vscode.

推荐答案

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

Thanks to Rob Lourens, this problem is caused by spaces and other special characters in the file path that may break sourcemaps.

这篇关于如何将webpack源映射制作为原始文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！