[AngularJS + Webpack] Uglifying your JavaScript
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的更多相关文章
- [AngularJS + Webpack] require directives
direictives/index.js: module.exports = function(ngModule) { //register all the directives here requi ...
- [AngularJS + Webpack] Using Webpack for angularjs
1. Install webpack & angular: npm install webpack angular 2. Create webpack.config.js file: modu ...
- Webpack打包报"JavaScript heap out of memory"错误
问题 开发项目有一段时间了,随着项目越来越大,打包的时间也相应的变长了,打包时的内存也增多了.这时候产生了一个问题,在发布项目的时候,会出现JavaScript heap out of memory错 ...
- [BUGCASE]Webpack打包报JavaScript堆内存泄漏的错误
一.问题描述 执行npm run build之后报错: 报错信息: FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript he ...
- [AngularJS + Webpack] Production Setup
Using Angular with webpack makes the production build a breeze. Simply alter your webpack configurat ...
- [AngularJS + Webpack] Requiring CSS & Preprocessors
Making your CSS modular is a difficult thing to do, but using Webpack makes this so much easier. By ...
- [AngularJS + Webpack] Requiring Templates
With Angular, most of the time you're specifying a templateUrl for your directives and states/routes ...
- [AngularJS + Webpack] ES6 with BabelJS
Install: npm install --save-dev babel-loader webpack.config.js: Add module, tell webpack to find all ...
- 虽然今天angular5发布了,但我还是吧这篇angularjs(1)+webpack的文章发出来吧哈哈哈
本文为原创,转载请注明出处: cnzt 文章:cnzt-p http://www.cnblogs.com/zt-blog/p/7779384.html 写在前面: 因为最近总结自己之前做过 ...
随机推荐
- adodb配置与使用
=========================================php100:80:ADODB PHP数据库万能引擎类 ADODB PHP数据库介绍与特点 ADODB 是一种兼容的各 ...
- C# 仿迅雷风格选项卡
private void listView1_SelectedIndexChanged(object sender, EventArgs e) { listView1.FullRowSelect = ...
- java 转html为pdf
最近有个需求转html为pdf . 用过itext . pd4ml ,都不理想,不是样式有问题,就是页面大小有问题. 或字体有问题. 解决办法是通过wkhtmltopdf工具 , 下载地址为:htt ...
- JAVA面试题相关基础知识
1.面向对象的特征有哪些方面 ①抽象: 抽象就是忽略一个主题中与当前目标无关的那些方面,以便更充分地注意与当前目标有关的方面.抽象并不打算了解全部问题,而只是选择其中的一部分,暂时不用部分细节 ...
- base64的一个应用情景
AddActivity.xml rushrank.xml 不过AddActivity.xml不也是通过二进制流就传过去了吗? 事实上是可以的,只要不将这些二进制的数据写下来,传播是可以的,只 ...
- spm使用之七不用seajs改用headjs起步
这几天在看phpwind官方网站, 他们的前端用了一个叫做head.js的js加载器, 官方网站在 http://headjs.com/ 号称是你只需要在你的html文件中的<head>& ...
- RH的NFS配置--简单OK
参照文档: http://wenku.baidu.com/link?url=SAcDvj8WtBd8dunC7P6FTFADYYVzzxhOiNJqbgr-aGTZovM0lHg-wbYgv9I3Lu ...
- 【POJ】2117 Electricity
无向图求割点和连通块. /* POJ2117 */ #include <iostream> #include <vector> #include <algorithm&g ...
- 队爷的Au Plan CH Round #59 - OrzCC杯NOIP模拟赛day1
题目:http://ch.ezoj.tk/contest/CH%20Round%20%2359%20-%20OrzCC杯NOIP模拟赛day1/队爷的Au%20Plan 题解:看了题之后觉得肯定是DP ...
- [转载]函数getopt(),及其参数optind
最近用到了getopt()这个函数,对它进行了一些了解.这篇博文还是写的非常清楚的.值得学习.最近在改进一个开源项目,希望自己能静下心好好分析代码. ------------------------- ...