Visual Studio 2017 无法识别 Webpack 源映射 [英] Webpack source maps not recognized by Visual Studio 2017

问题描述

我的 Typescript 项目使用的是 Visual Studio 2017.我尝试使用 Webpack 为源文件创建一个包.Webpack 生成的源映射包含以下格式的源文件 url:webpack:///./Main/SomeFile.ts".这会导致 Chrome Dev Tools 在Sources"标签中将 webpack 显示为一个单独的域.展开后，可以看到源 ts 文件并成功设置断点.但问题是我无法使用 VS 2017 进行调试，因为我在 IDE 中设置的断点不起作用.

I am using Visual Studio 2017 for my Typescript project. I tried using Webpack to create a bundle for the source files. The source map produced by Webpack contains the source file urls in this format: "webpack:///./Main/SomeFile.ts". This causes Chrome Dev Tools to display webpack as a separate domain in the "Sources" tab. And when expanded, I can see the source ts files and successfully set breakpoints. But the problem is that I cannot debug using VS 2017 since the breakpoints I set in the IDE do not work.

作为一种解决方法，我手动将源映射文件中的所有这些webpack:///."部分替换为../"，它现在指向正确的路径源文件相对于捆绑文件.现在 VS 选择断点，我可以在 VS 内部进行调试.

As a work-around, I manually replaced all these "webpack:///." parts in the source map file by "../" which now points to the correct paths of the source files relative to the bundle file. And now VS picks up the breakpoints and I can debug inside VS.

我的问题是:

1. webpack:///"的含义是什么?为什么要生成它而不是相对路径?
2. 为什么 VS 2017 不选择这些并开箱即用?与我上面尝试的变通方法相比，正确的解决方案是什么?
3. 如果除了我提到的变通方法之外没有其他解决方案，我该如何将其集成到 webpack 处理管道中，以便我不必每次都手动执行此操作?

这是我的配置:

webpack.config.js

const path = require('path');

module.exports = {
    mode: 'development',
    devtool: "source-map",
    entry: {
        app: './Components/MainComponent/MainComponent.ts'
    },
    output: {
        filename: '[name].js',
        path: __dirname + '/dist'
    },
    module: {
        rules: [
            { test: /.css$/, use: 'css-loader' },
            { test: /.ts$/, use: 'ts-loader' },
            //{ test: /.ts$/, use: 'awesome-typescript-loader' },
            //{ enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
        ]
    },
    resolve: {
        extensions: ['.ts', '.js', '.json']
    }
}

tsconfig.json

{
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": false,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "outDir": "./dist/",
    "allowJs": true,
    "module": "amd",
    "alwaysStrict": true
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ],
  "compileOnSave": true
}

推荐答案

将此添加到您的 webpack.config.js，在 module.exports 中:

Add this to your webpack.config.js, inside module.exports:

devtool: false,
plugins: [
    new webpack.SourceMapDevToolPlugin({
        filename: "[file].map",
        fallbackModuleFilenameTemplate: '[absolute-resource-path]',
        moduleFilenameTemplate: '[absolute-resource-path]'
    })
]

这将使断点在 Visual Studio 2017 中工作.

This will make breakpoints work in Visual Studio 2017.

这篇关于Visual Studio 2017 无法识别 Webpack 源映射的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！