Question

我正在尝试使用angular2 / webpack2堆栈设置dev环境，我有下一个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源映射文件（参见＆＃34; 2＆＃34;在pic上），但是当我遇到异常时，我只看到对编译捆绑的引用（参见＆＃34; 1＆＃34;在图片上）在堆栈跟踪中。问题：如何配置webpack以查看对source-map * .ts文件的正确引用，而不是编译的bundle js文件？

Answer 1

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

Answer 2

在angular2中，我们可以进行相同级别的调试，我们需要添加一个调试器关键字，就像我们在节点中那样打开控制台，当它到达你左边的文件时看到调用堆栈，你可以在那里找到文件路径这一点，它直接通过ts文件重定向你，所以调试将很容易，像以前一样酷

错误堆栈跟踪与角度2和webpack 2

2 个答案: