Webpack source maps not recognized by Visual Studio 2017

Question

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.

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.

My questions are:

1. What is the meaning of "webpack:///" and why is it being produced instead of relative paths?
2. Why doesn't VS 2017 pick up these and work out-of-the-box? And what is the proper solution as opposed to the work-around I tried above?
3. If there is no other solution than the work-around I mentioned, how can I integrate it to the webpack processing pipeline so that I don't have to do it manually every time?

Here are my configs:

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
}

Answer 1

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]'
    })
]

This will make breakpoints work in Visual Studio 2017.