如何縮短webpack堆棧跟蹤？

Question

我剛把Angular2應用程序從SystemJS遷移到了webpack。一切都好，但我已經厭倦了滾動異常的堆棧跟蹤。

一個異常會在控制檯中產生716行堆棧跟蹤！

我已經上傳了完整的堆棧跟蹤與git：https://github.com/sinedsem/test/blob/master/stack_trace.txt

我想離開只有一個的消息，在那裏我可以看到原來的文件和行文件部分：這裏是例子：

我能做到這一點嗎？

的WebPack配置相同https://github.com/AngularClass/angular2-webpack-starter

Answer 1

我找到了一個解決辦法：使用Chrome瀏覽器開發工具「的.ts」過濾器。這隻在屏幕截圖中留下了上面顯示的一條短消息。

Answer 2

Angular 2 webpack啓動器非常複雜;有太多的東西;如果在你的項目中需要不同的東西，或者如果有一些不同的東西，將很難調試錯誤。從angular2網站

嘗試使用的WebPack指南：

https://angular.io/docs/ts/latest/guide/webpack.html

舉例angularclass不會更新與從angular2每一個新版本。 package.json中的示例; 從角度網站你會發現最後一個版本：「@ angular/common」：「〜2.4.0」 從angularclass：「〜angular/common」：「〜2.4.0」，

重要的是你理解webpack如何工作，因爲更簡單的設置，以後修改和添加東西。

我webpack.common.js改變的是：

var webpack = require('webpack'); 
var HtmlWebpackPlugin = require('html-webpack-plugin'); 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 

var autoprefixer = require('autoprefixer'); 

var helpers = require('./helpers'); 


module.exports = { 
    entry: { 
     'polyfills': './src/polyfills.ts', 
     'vendor': './src/vendor.ts', 
     'app': './src/main.ts' 
    }, 

    resolve: { 
     extensions: ['', '.ts', '.js', '.json', '.css', '.scss', '.html'] 
    }, 

    module: { 
     loaders: [ 
      { 
       test: /\.ts$/, 
       loaders: ['awesome-typescript-loader', 'angular2-template-loader'] 
      }, 
      { 
       test: /\.html$/, 
       loader: 'html' 
      }, 
      { 
       test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/, 
       loader: 'file?name=assets/[name].[hash].[ext]' 
      }, 
      { 
       test: /\.css$/, 
       exclude: helpers.root('src', 'app'), 
       loader: ExtractTextPlugin.extract('style', 'css?sourceMap') 
      }, 
      { 
       test: /\.css$/, 
       include: helpers.root('src', 'app'), 
       loader: 'raw' 
      }, 
      { 
       test: /\.scss$/, 
       exclude: helpers.root('src', 'app'), 
       loader: ExtractTextPlugin.extract(
        'style-loader', 
        'css-loader!postcss-loader!sass-loader' 
       ) 
      }, 
      { 
       test: /\.scss$/, 
       include: helpers.root('src', 'app'), 
       loader: 'raw!css!postcss-loader!sass' 
      }, 
      { 
       test: /\.json$/, 
       loader: 'json-loader' 
      } 
     ] 
    }, 

    postcss: function (webpack) { 
     return [ 
      autoprefixer({browsers: ['last 10 versions']}), 
     ]; 
    }, 

    plugins: [ 

     new webpack.optimize.CommonsChunkPlugin({ 
      name: ['app', 'vendor', 'polyfills'] 
     }), 

     new HtmlWebpackPlugin({ 
      template: 'src/index.html' 
     }), 


     new ExtractTextPlugin('css/[name].css') 


    ] 

}; 

我已經添加了SaaS的支持和autoprefixer。