When you uglify your Angular code with Webpack's uglify plugin, debugging your application can be a nightmare. See how easy it is to add source maps to your bundle so you can easily debug even in production.

Add source map to the production:

if(process.env.NODE_ENV === "production"){
config.output.path = __dirname + "/dist";
config.plugins.push(new webpack.optimize.UglifyJsPlugin()); // Uglify js
config.devtool = 'source-map';
}
var webpack = require('webpack')
path = require('path'); path.resolve(__dirname, "app"); var config = {
context: __dirname + '/app',
entry: './index.js',
output: {
path: __dirname + '/app',
filename: 'bundle.js'
},
plugins: [
new webpack.DefinePlugin({
ON_TEST: process.env.NODE_ENV === "test"
})
],
module: {
loaders: [
{test: /\.js$/, loader: 'ng-annotate-loader!babel-loader', exclude: /node_modules/},
{test: /\.html$/, loader: 'html-loader', exclude: /node_modules/},
{test: /\.css$/, loader: 'style!css', exclude: /node_modules/},
{test: /\.styl/, loader: 'style!css!stylus', exclude: /node_modules/}
]
}
}; if(process.env.NODE_ENV === "production"){
config.output.path = __dirname + "/dist";
config.plugins.push(new webpack.optimize.UglifyJsPlugin()); // Uglify js
config.devtool = 'source-map';
} module.exports = config;

[AngualrJS + Webpack] Production Source Maps的更多相关文章

  1. [Javascript] Webpack Loaders, Source Maps, and ES6

    Using ES6 To use ES6, we need loader. Modify webpack.config.js file: module.exports = { entry: './in ...

  2. [转] Webpack的devtool和source maps

    source maps Webpack打包生成的.map后缀文件,使得我们的开发调试更加方便,它能帮助我们链接到断点对应的源代码的位置进行调试(//# souceURL),而devtool就是用来指定 ...

  3. [Angular] Debug Angular apps in production without revealing source maps

    Source: https://blog.angularindepth.com/debug-angular-apps-in-production-without-revealing-source-ma ...

  4. Sentry(v20.12.1) K8S 云原生架构探索,SENTRY FOR JAVASCRIPT Source Maps 详解

    系列 Sentry-Go SDK 中文实践指南 一起来刷 Sentry For Go 官方文档之 Enriching Events Snuba:Sentry 新的搜索基础设施(基于 ClickHous ...

  5. Introduction to JavaScript Source Maps

    下载jquery时候发现:jquery.min.map  这什么鬼呀? https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/core.js http ...

  6. WebStorm 9 自动编译 LESS 产出 CSS 和 source maps

    1.双击桌面Chrome图标,打开Chrome,按键盘“F12”键,打开开发工具界面,点击其右上角的“设置”按钮,勾选“Enable JavaScript source maps”  及“Enable ...

  7. 前端构建:Source Maps详解

    一.前言 当使用CoffeeScript.ClojureScript编写前端脚本时,当使用Less.Sacc编写样式规则时,是否觉得调试时无法准确找到源码位置呢?当使用jquery.min.js等经压 ...

  8. webpack之source map

    先来一个webpack小例子,项目结构如下: // greeter.js module.exports = function() { var greet = document.createElemen ...

  9. Source Maps简介

    提高网站性能最简单的方式之一是合并压缩JavaScript和CSS文件.但是当你需要调试这些压缩文件中的代码时,那将会是一场噩梦.不过也不用担心,souce maps将会帮你解决这一问题. Sourc ...

随机推荐

  1. __set($key,$values) 和__get($varName) 魔术方法设置读取私有属性

    __set($key,$val) 对类内私有属性赋值 作用:对私有属性的处理 当在类外对类内的私有属性赋值时会自动调用此函数 __get($varName) 读取类内私有属性 作用:虽然可以外部访问, ...

  2. MVC简单分页(未实现无刷新分页)

    分页Html辅助方法 using System.Text; using System.Web: using System.Web.Mvc; namespace System.Web.Mvc { pub ...

  3. bzoj 1191: [HNOI2006]超级英雄Hero 并查集 || 匈牙利算法

    1191: [HNOI2006]超级英雄Hero Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 1804  Solved: 850[Submit][S ...

  4. java 上下文切换

    上下文概念 在高性能编程时,经常接触到多线程. 起初我们的理解是, 多个线程并行地执行总比单个线程要快, 就像多个人一起干活总比一个人干要快. 然而实际情况是, 多线程之间需要竞争IO设备, 或者竞争 ...

  5. Keil C51程序调试过程

    用Keil C51编写程序时,经常需要调试,如果不是经常用这个软件的话,很容易忘记这些调试步骤,现在举一个例子“验证延迟函数delay()使其延迟的时间为500ms”说明. 源程序写完后,就可以调试了 ...

  6. Java:多线程,线程池,使用CompletionService通过Future来处理Callable的返回结果

    1. 背景 在Java5的多线程中,可以使用Callable接口来实现具有返回值的线程.使用线程池的submit方法提交Callable任务,利用submit方法返回的Future存根,调用此存根的g ...

  7. 【POJ】1451 T9

    DFS+字典树. #include <cstdio> #include <cstring> #include <cstdlib> typedef struct Tr ...

  8. [LeetCode#265] Paint House II

    Problem: There are a row of n houses, each house can be painted with one of the k colors. The cost o ...

  9. Visual Studio 2013新功能

    微软打破了Visual Studio两年升级一次的传统,Visual Studio 2012发布还不足一年,微软就计划发布了Visual Studio 2013了.在今天的TechEd大会上,微软宣布 ...

  10. HDOJ/HDU 2551 竹青遍野(打表~)

    Problem Description "临流揽镜曳双魂 落红逐青裙 依稀往梦幻如真 泪湿千里云" 在MCA山上,除了住着众多武林豪侠之外,还生活着一个低调的世外高人,他本名逐青裙 ...