在Visual Studio中調試Angular 2慢用Webpack

我正在運行Visual Studio 2015更新3，ASP.Net MVC 4.6.1，Angular 2.4.6，Webpack 2.2.1和webpack Task Runner Explorer擴展。如果我在不調試的情況下運行Visual Studio，它可以正常工作，但如果我嘗試在調試模式下運行Visual Studio，則需要花費幾分鐘時間來加載網頁。看着Visual Studio，它試圖加載Angular的源地圖，每一個都需要幾秒鐘的時間。在Visual Studio中調試Angular 2慢用Webpack

看起來問題似乎是因爲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'] 
     }) 
    ] 

}

來源

2017-02-28 Belaroth

在PR最終結果是由於所有的供應商和Polyfill文件都有這麼多的源地圖，VS需要這麼長時間才能加載。一旦我告訴它不再爲那些源地圖生成源地圖，它開始走得更快。

來源

2017-05-03 14:36:39 Belaroth

你是怎麼做到的，你可以解釋一下，我因爲這個問題而陷入困境 –

在Visual Studio中調試Angular 2慢用Webpack

回答

相關問題