Visual Studio에서 각도 2를 디버깅하는 데 Webpack이 느립니다.

Question

Visual Studio 2015 업데이트 3, ASP.Net MVC 4.6.1, 각도 2.4.6, Webpack 2.2.1 및 webpack Task Runner Explorer 확장을 실행하고 있습니다. 디버깅하지 않고 Visual Studio를 실행하면 문제가 없지만 Visual Studio를 디버그 모드로 실행하려고하면 웹 페이지로로드하는 데 몇 분이 걸립니다. 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'] 
     }) 
    ] 

} 

Answer 1

홍보 oblem은 VS가로드하는 데 오랜 시간이 걸린 모든 공급 업체 및 Polyfill 파일에서 발생하는 소스 맵이 너무 많아졌습니다. 일단 내가 더 이상 소스 맵을 생성하지 않는다고 말하면 훨씬 더 빨리 시작됩니다.