Asp.net mvc 4 在VisualStudio中调试Angular 2使用Webpack缓慢

我正在运行Visual Studio 2015 Update 3、ASP.Net MVC 4.6.1、Angular 2.4.6、Webpack 2.2.1和Webpack Task Runner Explorer扩展。如果我在不调试的情况下运行VisualStudio，一切正常，但如果我尝试在调试模式下运行VisualStudio，它需要几分钟的时间来加载网页。在VisualStudio中，它试图加载Angular的源地图，每一个都需要几秒钟的时间

问题似乎是因为TaskRunner 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'
    }
});

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

}

webpack.common.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'
    }
});

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

}

---

最终的问题是，由于所有供应商和Polyfill文件导致的源映射太多，VS需要很长时间才能加载。有一次，我告诉它不要再为这些文件生成源映射，它开始运行得更快了。

问题是，由于所有供应商和Polyfill文件导致的源映射太多，VS加载时间太长。有一次，我告诉它不再为那些人生成源地图，它开始更快了。

你是怎么做到的？你能解释一下吗？我被这个问题困住了。你是怎么做到的？你能解释一下吗？我被这个问题困住了