Исходные карты Webpack не распознаются Visual Studio 2017

Question

Я использую Visual Studio 2017 для своего проекта Typescript. Я попытался с помощью Webpack создать пакет для исходных файлов. Исходная карта, созданная Webpack, содержит ссылки на исходные файлы в следующем формате: "webpack:///./Main/SomeFile.ts". Это приводит к тому, что Chrome Dev Tools отображает веб-пакет как отдельный домен на вкладке « Sources ». А после расширения я вижу исходные файлы TS и успешно устанавливаю точки останова. Но проблема в том, что я не могу отладить с помощью VS 2017, так как точки останова, установленные в IDE, не работают.

В качестве обходного пути я вручную заменил все эти "webpack:///." части в файле исходной карты на "../", что теперь указывает на правильные пути исходных файлов относительно файла комплекта. И теперь VS обнаруживает точки останова, и я могу отлаживать внутри VS.

Мои вопросы:

1. Что означает "webpack: ///" и почему он создается вместо относительных путей?
2. Почему VS 2017 не берет их и не работает "из коробки"? И каково правильное решение в отличие от обходного пути, который я пробовал выше?
3. Если нет другого решения, кроме упомянутого мной обходного пути, как я могу интегрировать его в конвейер обработки веб-пакетов, чтобы мне не приходилось делать это каждый раз вручную?

Вот мои конфиги:

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

Добавьте это в ваш webpack.config.js, внутри module.exports:

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

Это заставит точки останова работать в Visual Studio 2017.