加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

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

发布时间:2020-12-17 06:49:00 所属栏目:安全 来源:网络整理
导读:我正在尝试使用angular2 / webpack2堆栈设置开发环境,我有下一个webpack配置: // Helper: root() is defined at the bottomvar path = require("path");var webpack = require("webpack");// Webpack Pluginsvar autoprefixer = require("autoprefixer");va
我正在尝试使用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));
}

enter image description here

我的问题:我可以看到有效的ts源映射文件(参见图片中的“2”),但是当我得到异常时,我只看到堆栈跟踪中编译的bundle(参见图片中的“1”)的引用.
问题:如何配置webpack以查看对source-map * .ts文件的正确引用,而不是编译的bundle js文件?

解决方法

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

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读