Angular requires some careful consideration when uglifying your code because of how angular's dependency injection system works. See how easy it is to add this consideration to your webpack configuration so you can minify your Angular JavaScript with Webpack.

Install:

npm install --save-dev ng-annotate-loader

After babel compile the javascript code, we need to annotate the angular code:

{test: /\.js$/, loader: 'ng-annotate-loader!babel-loader', exclude: /node_modules/},

Uglify the Javascript in production env:

if(process.env.NODE_ENV === "production"){
config.output.path = __dirname + "/dist";
config.plugins.push(new webpack.optimize.UglifyJsPlugin()); // Uglify js
}
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
} module.exports = config;

If in the code, you need to tell the ng-annotate-loader to annotate the code just do:

controller: /*@ngInject*/ function(){
.....
}

[AngularJS + Webpack] Uglifying your JavaScript的更多相关文章

  1. [AngularJS + Webpack] require directives

    direictives/index.js: module.exports = function(ngModule) { //register all the directives here requi ...

  2. [AngularJS + Webpack] Using Webpack for angularjs

    1. Install webpack & angular: npm install webpack angular 2. Create webpack.config.js file: modu ...

  3. Webpack打包报"JavaScript heap out of memory"错误

    问题 开发项目有一段时间了,随着项目越来越大,打包的时间也相应的变长了,打包时的内存也增多了.这时候产生了一个问题,在发布项目的时候,会出现JavaScript heap out of memory错 ...

  4. [BUGCASE]Webpack打包报JavaScript堆内存泄漏的错误

    一.问题描述 执行npm run build之后报错: 报错信息: FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript he ...

  5. [AngularJS + Webpack] Production Setup

    Using Angular with webpack makes the production build a breeze. Simply alter your webpack configurat ...

  6. [AngularJS + Webpack] Requiring CSS & Preprocessors

    Making your CSS modular is a difficult thing to do, but using Webpack makes this so much easier. By ...

  7. [AngularJS + Webpack] Requiring Templates

    With Angular, most of the time you're specifying a templateUrl for your directives and states/routes ...

  8. [AngularJS + Webpack] ES6 with BabelJS

    Install: npm install --save-dev babel-loader webpack.config.js: Add module, tell webpack to find all ...

  9. 虽然今天angular5发布了,但我还是吧这篇angularjs(1)+webpack的文章发出来吧哈哈哈

    本文为原创,转载请注明出处: cnzt       文章:cnzt-p http://www.cnblogs.com/zt-blog/p/7779384.html 写在前面: 因为最近总结自己之前做过 ...

随机推荐

  1. swift官方文档中的函数闭包是怎么理解的?

    官方文档中的16页: numbers.map({ (number: Int) -> Int in let result = * number return result }) 不知道这个怎么用, ...

  2. jquery roundabout幻灯片插件3d图片切换支持图片旋转切换滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. PHPCMS GET标签使用

    大纲: get 标签概述get 标签语法get 标签创建工具get 调用本系统示例get 调用其他系统示例一.get 标签概述    通俗来讲,get 标签是Phpcms定义的能直接调用数据库里面内容 ...

  4. Window7 下开发php扩展

    一.首先查看phpinfo() 信息PHP Version 5.4.34Zend Extension Build     API220100525,TS,VC9 PHP Extension Build ...

  5. 控制反转(IoC)与依赖注入(DI)

    1.控制反转(Inversion of Control)与依赖注入(Dependency Injection) 控制反转即IoC (Inversion of Control),它把传统上由程序代码直接 ...

  6. UFLDL教程之(三)PCA and Whitening exercise

    Exercise:PCA and Whitening 第0步:数据准备 UFLDL下载的文件中,包含数据集IMAGES_RAW,它是一个512*512*10的矩阵,也就是10幅512*512的图像 ( ...

  7. Coursera《machine learning》--(14)数据降维

    本笔记为Coursera在线课程<Machine Learning>中的数据降维章节的笔记. 十四.降维 (Dimensionality Reduction) 14.1 动机一:数据压缩 ...

  8. Data guard RAC配置【二】

    2. 利用duplicate配置容灾端 1.配置容灾端oracle用户的环境变量,这里以192.166.1.61为例. export ORACLE_BASE=/opt/oracle export OR ...

  9. ie8如何支持html5

    两种方法 : 一:Coding JavaScript <!--[if lt IE9]> <script>    (function() {     if (!      /*@ ...

  10. 当今流行的 React.js 适用于怎样的 Web App?

    外村 和仁(株式会社 ピクセルグリッド)  React.js是什么? React.js是Facebook开发的框架. http://facebook.github.io/react/ 官网上的描述是「 ...