Webpack source maps not recognized by Visual Studio 2017 - visual-studio

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:
What is the meaning of "webpack:///" and why is it being produced instead of relative paths?
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?
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.