webpack 3.X学习之多页面打包的方法
简介
我们开发不可能只写一个页面，每次都要写很多页面，这时为了开发效率，我们使用前端自动化工具webpack，那么webpack是如何打包页面的呢？又是如何打包多页面的呢？
单页面打包
我们知道要打包单页面的方法，很简单，配置入口，和html插件，
constHtmlWebpackPlugin=require('html-webpack-plugin');
constconfig={
entry:{
index:'./src/index.js'
},
output:{
path:path.join(__dirname,'dist'),
filename:'js/index.js'
}
...
plugins:[
newHtmlWebpackPlugin({
filename:'index.html',
template:'./src/index.html',
hash:true,
minify:{
removeAttributeQuotes:true,
removeComments:true,
collapseWhitespace:true,
removeScriptTypeAttributes:true,
removeStyleLinkTypeAttributes:true
}
})
]
}
上面的配置就是打包一个单页面的代码，具体配置项的意思请参考HTMLWebpackPlugin;
如何打包多页面
在学了webpack之后，我的感受是我会配置webpack了，也能运行了，但是学习的过程中都是单页面的，那么多页是如何打包的呢？其实多页面的打包和单页面的打包的原理是一样的，只是多配置几个对应的入口，和出口，以及HtmlWebpackPlugin对象；当然你完全可以像下面这样：
constconfig={
entry:{
index:'./src/index.js'，
info:'./src/index.js'
},
output:{
path:path.join(__dirname,'dist'),
filename:'js/[name].js'
}
...
plugins:[
newHtmlWebpackPlugin({
filename:'index.html',
template:'./src/index.html',
chunks:['index'],
hash:true,
minify:{
removeAttributeQuotes:true,
removeComments:true,
collapseWhitespace:true,
removeScriptTypeAttributes:true,
removeStyleLinkTypeAttributes:true
}
}),
newHtmlWebpackPlugin({
filename:'info.html',
template:'./src/info.html',
hash:true,
chunks:['info'],
minify:{
removeAttributeQuotes:true,
removeComments:true,
collapseWhitespace:true,
removeScriptTypeAttributes:true,
removeStyleLinkTypeAttributes:true
}
})
]
}
细心的你肯定发现我改变了几个地方，一是,把output.filename的‘js/index.js'变成了‘js/[name].js',这是因为我们是多页面，每个页面对应相应的js这样方便管理，二是，在HtmlWebpackPlugin对象中添加了chunks这个属性，chunk属性是让你选择对应的js模块；
上面这种写法当然是没有问题，这是只有两个页面无所谓，那么有十个甚至更多呢，我们一直做着重复的事，这不是我们程序员的风格，我们就是为了能够偷懒才做程序员的不是吗?(当然还有高工资(#^.^#))，接下来我们来抽离这些重复的事；
首先，我们通过Node的glob对象，来获取我们存在的html或js；
/**
*
*@param{string}globPath文件的路径
*@returnsentries
*/
functiongetView(globPath,flag){
letfiles=glob.sync(globPath);
letentries={},
entry,dirname,basename,pathname,extname;
files.forEach(item=>{
entry=item;
dirname=path.dirname(entry);//当前目录
extname=path.extname(entry);//后缀
basename=path.basename(entry,extname);//文件名
pathname=path.join(dirname,basename);//文件路径
if(extname==='.html'){
entries[pathname]='./'+entry;
}elseif(extname==='.js'){
entries[basename]=entry;
}
});
returnentries;
}
既然，我们已经有了getView()函数，可以获取html和js文件，那么我们就可以确定有多少个入口，和多少个页面;
letentriesObj=getView('./src/js/*.js');
letconfig={
entry:entriesObj,
...
}
上面我们就配置好了入口，不需要我们手动添加了，有多少js就有多少入口；
letpages=Object.keys(getView('./src/*html'));
pages.forEach(pathname=>{
lethtmlname=pathname.split('src\\')[1];
letconf={
filename:`${htmlname}.html`,
template:`${pathname}.html`,
hash:true,
chunks:[htmlname],
minify:{
removeAttributeQuotes:true,
removeComments:true,
collapseWhitespace:true,
removeScriptTypeAttributes:true,
removeStyleLinkTypeAttributes:true
}
}
config.plugins.push(newHtmlWebpackPlugin(conf));
});
最后，我们获取HTML页面，和添加对应页面的HTMLWebpackPlugin对象；
后记
通过以上的三个步骤，就可以配置好一个可以打包多页面的webpack工具；本人的水平比较有限，在书写的过程中，可能有很多说的比较模糊，请多多包涵，也请大神拍砖，多多指教
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。