asp.net-mvc-4 - Webpack を使用した Visual Studio での Angular 2 のデバッグが遅い

Question

Visual Studio 2015 Update 3、ASP.Net MVC 4.6.1、Angular 2.4.6、Webpack 2.2.1、および webpack Task Runner Explorer 拡張機能を実行しています。デバッグせずに Visual Studio を実行すると、すべて正常に動作しますが、Visual Studio をデバッグ モードで実行しようとすると、Web ページが読み込まれるまでに数分かかります。Visual Studio を見ると、Angular のソース マップを読み込もうとしていて、それぞれに数秒かかっています。

Task Runner Explorer プラグインがコマンドを実行しているため、問題が発生しているようです: webpack -d --watch --color、これは常にすべてのソースマップを生成するように指示しています。「-d」スイッチを実行しないようにプラグインを変更する方法はないようです。私の構成ファイルでは、コードのソース マップのみを生成するように構成しています。しかし、コマンドラインは常に構成ファイルの内容を上書きしているようです。

誰かがこれを修正しましたか？

tsconfig.json

{
"compileOnSave": true,
"compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  }
}

webpack.dev.js

var webpackMerge = require('webpack-merge');
var webpack = require('webpack');
var commonConfig = require('./webpack.common.js');

module.exports = webpackMerge(commonConfig, {

    output: {
        path: '\dist',
        publicPath: 'http://localhost:8080/',
        filename: '[name].js',
        sourceMapFilename: '[name].js.map',
        chunkFilename: '[id].chunk.js'
    },

    plugins: [
        new webpack.SourceMapDevToolPlugin({
            test: [/\.js$/, /\.ts$/],
            columns: false,
            filename: '[file].map',
            exclude: ['vendor.js', 'polyfills'],
            lineToLine: false,
            module: true,
            append: '\n//# sourceMappingURL=[url]'
        })
    ],

    devServer: {
        historyApiFallback: true,
        stats: 'minimal'
    }
});

webpack.common.js

"use strict";

var webpack = require('webpack');
var helpers = require('./helpers.js');
var path = require('path');

module.exports = {
    entry: {
        app: "./app/main.ts",
        vendor: "./app/config/vendor.ts",
        polyfills: "./app/config/polyfills.ts"
    },
    resolve: {
        extensions: ['.ts', '.js']
    },
    devServer: {
        contentBase: ".",
        host: "localhost",
        port: 9000
    },
    module: {
        rules: [
        {
            test: /\.ts$/,
            loaders: ['awesome-typescript-loader',
                'angular2-template-loader',
                'tslint-loader']
        },
        {
            test: /\.html$/,
            loader: 'raw-loader'
        },
        {
            test: /\.css$/,
            include: helpers.root('app'),
            loaders: 'style-loader!css-loader'
        },
        {
            test: /\.js$/,
            use: ["source-map-loader"], /*strips off extra # sourceMappingURL= which were in node_modules*/
            enforce: "pre",
            exclude: [
              // these packages have problems with their sourcemaps
              path.resolve('./node_modules/ng2-interceptors')
            ]
        }
        ]
    },
    plugins: [
        // Workaround for angular/angular#11580
        new webpack.ContextReplacementPlugin(
        // The (\\|\/) piece accounts for path separators in *nix and Windows
        /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
        helpers.root('./'), // location of your src
        {} // a map of your routes
        ),
        new webpack.optimize.CommonsChunkPlugin({
            name: ['app', 'vendor', 'polyfills']
        })
    ]

}