angular 2 和 webpack 2 的错误堆栈跟踪

Question

我正在尝试使用 angular2/webpack2 堆栈设置开发环境，并且我有下一个 webpack 配置：

// Helper: root() is defined at the bottom
var path = require("path");
var webpack = require("webpack");

// Webpack Plugins
var autoprefixer = require("autoprefixer");
var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
var HtmlWebpackPlugin = require("html-webpack-plugin");
var ExtractTextPlugin = require("extract-text-webpack-plugin");



module.exports = function makeWebpackConfig(env) {

  var config = {};

  config.devtool = "source-map";

  config.entry = {
    "main": "./src/main.ts",
    "vendor": "./src/vendor.ts",
    "polyfills": "./src/polyfills.ts"
  }

  config.output = {
    "chunkFilename": "js/[name].[hash].chunk.js",
    "filename": "js/[name].js",
    "path":  root("dist"),
    "sourceMapFilename": '[file].map',

  };

  config.resolve = {
    extensions: [".ts", ".js", ".css", ".html"]
  };

  config.module = {
    rules: [
      { test: /\.ts$/,                                                                       loaders: ["awesome-typescript-loader", "angular2-template-loader"] },
      { test: /\.css$/, loaders: ExtractTextPlugin.extract({ fallbackLoader: "style-loader", loader:  ["css-loader", "postcss-loader"] }) },
      { test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?v=[0-9]\.[0-9]\.[0-9])?$/,     loaders: ["file-loader?name=fonts/[name].[hash].[ext]?"] },
      { test: /\.html$/,                                                                     loaders: ["raw-loader"] }
    ]
  };

  config.plugins = [
    new ExtractTextPlugin(
      { filename: "css/[name].[hash].css" }
    ),
    new webpack.ContextReplacementPlugin(
      /angular(\|\/)core(\|\/)(esm(\|\/)src|src)(\|\/)linker/,
      root("./src")
    ),
    new webpack.LoaderOptionsPlugin({
      options: {
        sassLoader: {},
        postcss: [autoprefixer({ browsers: ["last 2 version"] })]
      }
    }),
    new HtmlWebpackPlugin({
      template: "./src/index.html",
      chunksSortMode: "dependency"
    }),
    new CommonsChunkPlugin({
      name: ["vendor", "polyfills"]
    }),
  ];

  config.devServer = {
    contentBase: './src',
    historyApiFallback: true,
    quiet: true,
    stats: 'minimal' // none (or false), errors-only, minimal, normal (or true) and verbose
  };

  return config;
};

function root(args) {
  args = Array.prototype.slice.call(arguments, 0);
  return path.join.apply(path, [__dirname].concat(args));
}

我的问题：我可以看到有效的 ts 源映射文件（参见图片上的“2”），但是当我遇到异常时，我只看到对编译包的引用（参见图片上的“1”）在堆栈跟踪中。问题：我如何配置 webpack 以查看对 source-map *.ts 文件的正确引用，而不是编译的 bundle js 文件？

Answer 1

Error.stack 由 V8 生成，它对源映射一无所知，但是如果你这样做 console.log(error) DevTools 将使用源映射替换引用，但 zone.js 包装原始错误并提取堆栈为字符串，因此 DevTools 无法再替换引用。您可以尝试使用像 sourcemapped-stacktrace.

这样的堆栈跟踪映射器

Answer 2

在 angular2 中，我们可以进行相同级别的调试，唯一的事情是我们需要像在 node 中一样添加一个调试器关键字，然后打开控制台，当它到达您的左文件时，请查看调用堆栈，您可以在其中找到文件路径，它会直接通过 ts 文件重定向您，因此调试会像以前一样简单和酷

angular 2 和 webpack 2 的错误堆栈跟踪

Error stacktrace with angular 2 and webpack 2

webpack

webpack-2

angular