coolpack

coolpack is a module bundler,enables add version number automatically,load asynchronously,and do the relevant optimization.

Install with npm:

$ npm install coolpack -g

Usage

In your current path

$ coolpack

start dev Server

$ coolpack --server --minify=false

$ coolpack -s -m=false

---

The ideal web structure

    │ 
    ├── news.html
    │    ├── js/common.js
    │    └── js/news.js
    │
    ├── news/detail.html
    │    ├── js/common.js
    │    └── js/detail.js

coolpack:

//coolpack.config.js

module.exports={
    module:{
            list:[
                {
                name:"common-module-A.js"
                },
                {
                    name:"common-module-B.js"
                }
            ],
            output:"js/common.js",
            
            module:[
                {
                    list:{name:"src/news.js"},
                    output:"js/news.js",
                    template:"news.html"
                },
                {
                    list:{name:"src/detail.js"},
                    template:"news/detail.html"
                }
            ]
    }
}

---

Advantage

Description	Others	coolpack
Public documents	webpack+CommonsChunkPlugin	config=module:{ module:{} }
Asynchronous load module	module.js 3k -> 1 request module.css 2k -> 2 request	module.js+module.css 5k -> 1 request
css image path moduleA <- background:url(img/img.jpg)	root/news.html + moduleA background √ root/news/detail.html + moduleA background ×	root/news.html + moduleA background √ root/news/detail.html + moduleA background √

---

coolpack demo

https://github.com/anderpang/coolpack

---

coolpack.config.js

module.exports={
    context:"",                      //Working path, the default is the current path
    outputPath:"./build",            //Package output path, the default is "build"
    templatePath:"./public",         //The path where the template is located
    module:{                         //Module structure configuration
        list:[{                      //The module is included in the module
            name:"lib/jquery.js",    //Module path (The relative path for the resource context)
            alias:"jquery",          //Module alias [optional]
            untreated:true           //Whether to use coolpack analysis processing [optional]
        },
        {
           name:"lib/swiper.js",
           untreated:true
        }],
        output:"common.js",         //The module output name [optional]

        module:{
            list:{name:"entry.js"},
            output:"js/init.js",
            css:"css/style.css",
            template:"index.html",
            inject:"head",//"body"  //js plugin location, this default is "body" [optional]
        }
        
    },

   cssFileLimit:8192,              //convert to base64 in css file , the default is not converted [optional]
   rules:{                         //[Optional]  
        js:[],                     //[function(js){return js;}]          
        css:[],                    //[function(css){return css;}]         
        template:[]                //[function(html){return html;}]         
    },
    babel:{                       
       plugins:[],
       presets:[]
    },

    uglifyJs:{},
    postcssPlugins:[],
    cssSyntax:"",                  //String: "less" or "sass" or "scss"
                                   //Function: function(css,next){
                                                  var out=xxCssParse(css);
                                                  var err=null;
                                                      next(err,out);
                                              }
    htmlMinify:{},

   proxy:{                         //Proxy server
       "/api/":{                   //request url:"http://test.com/api/***"
           target:"http://test.com"
       }
   },
    hash:function(){                //hash value [optional]
        var date=new Date();
        var month=date.getMonth()+1;
        var dt=date.getDate();
        var order=Math.floor(Math.random()*90000)+10000;  
        
        return date.getFullYear()+"-"+(month//default true[optional]
    extractFirstCss:true,         //default true[optional]
    watch:false                     //default false[optional]
};