错误堆栈跟踪与角度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)); } 我的问题:我可以看到有效的ts源映射文件(参见图片中的“2”),但是当我得到异常时,我只看到堆栈跟踪中编译的bundle(参见图片中的“1”)的引用. 解决方法
Error.stack是由V8生成的,它对源映射一无所知,但是如果你做console.log(错误)DevTools将使用源映射替换引用,但zone.js包装原始错误并将堆栈提取为字符串,因此DevTools不能不再替换参考文献.您可以尝试使用像
sourcemapped-stacktrace这样的堆栈跟踪映射器.
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |