如何缩短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。