eazypack
eazypack is a module bundler,enables add version number automatically,load asynchronously,and do the relevant optimization.
Install with npm:
$ npm install eazypack -g
Usage
In your current path
$ eazypack
start dev Server
$ eazypack --server --minify=false
$ eazypack --s --m=false
The ideal web structure
│
├── news.html
│ ├── js/common.js
│ └── js/news.js
│
├── news/detail.html
│ ├── js/common.js
│ └── js/detail.js
eazypack:
//eazypack.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 | eazypack |
---|---|---|
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 √ |
eazypack demo
eazypack.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 eazypack 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<10?"0"+month:month)+"-"+(dt<10?"0"+dt:dt)+"-"+order;
},
useStrict:true, //default true[optional]
extractFirstCss:true, //default true[optional]
watch:false //default false[optional]
};