zoukankan      html  css  js  c++  java
  • [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(){
      .....   
    }
  • 相关阅读:
    [zz]利用__FILE__, __LINE__, __FUNCTION__跟踪调试程序
    [zz]va_start() 和 va_end()函数应用
    [zz]shmdt与shmctl的区别
    [zz]GNU C 扩展之__attribute__ 机制简介 [2]
    Linux errno 错误含义速查
    过滤器的简介
    MyBatis中的原理
    文件上传
    mybatis实体为什么要提供一个无参的构造函数
    为什么要有无参构造方法
  • 原文地址:https://www.cnblogs.com/Answer1215/p/4798238.html
Copyright © 2011-2022 走看看