webpack多页面开发实践
写在前面
webpack是一款模块加载器兼打包工具，能把js,css,页面，图片，视频等各种资源，进行模块化处理。而现在网上流传很多单页面的webpack模型，那多页面呢？比较少，现在我提供一个多页面的前端模型。希望大家适合使用。
在最开始接触webpack的时候，我都觉得webpack只适用于单页面应用，比如webpack+react，webpack+vue。我自己在使用webpack+vue构建项目及开发的过程中感受到了webpack的强大和方便。基于实际项目需求，我在想，多页面站点是否也能使用webapck来构建呢？于是就开始了一番探索，最终算是搭建了一套比较完整的解决方案。
本文以一个实际项目为例子，讲述在多页面项目中如何使用webpack进行工程化构建。本文是自己的实践经验总结，所以有些解决方案并不是最优的，仍在探索优化中，如果有什么错误纰漏，欢迎指出。
简介
本项目主要基于webpack2.x构建，以gulp作为辅助工具。前端使用art-template作为模板引擎，一个页面对应一个模板文件和一个入口文件，入口文件中可以通过import或require引入其他模块，这些模块webpack会自动跟入口文件合并为一个文件。
前端开发环境搭建
主要目录结构
├─dist#打包后生成的文件目录 └─src#开发目录 ├─components#通用组件 ├─static#静态资源目录 │├─css │├─img │└─js │├─component#站点通用组件对应的js │├─lib#第三方js库 │├─services#各页面入口 │└─util#通用工具js ├─template#html模板 └─views#页面 main.js#公共入口 gulpfile.js#gulp任务配置 package.json#项目依赖 webpack.config.js#webpack配置
webpack配置
入口文件
//获取入口文件
varentries=(function(){
varjsDir=path.resolve(__dirname,'src/static/js/services');
varentryFiles=glob.sync(jsDir+'/*.js');
varmap={};
entryFiles.forEach(function(filePath){
varfilename=filePath.substring(filePath.lastIndexOf('\/')+1,filePath.lastIndexOf('.'));
map[filename]=filePath;
});
returnmap;
})();
该方法将生成文件名到文件绝对路径的map，比如
entry:{
'page-1':'/../webpack-multipage-demo/src/static/js/services/page-1.js'
}
热更新
热更新简直不要太好用，极大地提高了开发效率。
//服务器配置
vardevServer=env==='production'?{}:{
contentBase:path.resolve(__dirname),
compress:true,
historyApiFallback:true,
hot:true,
inline:true,
host:'localhost',
port:8080
};
另外，在plugin中加入newwebpack.HotModuleReplacementPlugin()，开启HotModuleReplacemen，即可实现热更新。
生成html配置
约定同一页面的js文件与模板文件命名一致，最终根据该js生成与其同名的html文件。
varhtmlPages=(function(){
varartDir=path.resolve(__dirname,'src/views');
varartFiles=glob.sync(artDir+'/*.art');
vararray=[];
artFiles.forEach(function(filePath){
varfilename=filePath.substring(filePath.lastIndexOf('\/')+1,filePath.lastIndexOf('.'));
array.push(newHtmlWebpackPlugin({
template:path.resolve(__dirname,'src/template/index.html'),
filename:filename+'.html',
chunks:['vendor','main',filename],
chunksSortMode:function(chunk1,chunk2){
varorder=['vendor','main',filename];
varorder1=order.indexOf(chunk1.names[0]);
varorder2=order.indexOf(chunk2.names[0]);
returnorder1-order2;
},
minify:{
removeComments:env==='production'?true:false,
collapseWhitespace:env==='production'?true:false
}
}));
});
returnarray;
})();
通用模块提取为组件
对于一些在多个页面中都需要用到的模块，可将其提取出来作为通用的组件。组件的构成与页面一样，一个.js文件和一个.art文件以及一个.css文件，在js文件中渲染html内容，最后export，使用时直接require即可。具体实践可参考demo
存在问题
- 每新建一个页面就需要重新启动webpack服务
- 字体文件无法压缩，对于压缩通过font-face引入的网络字体，目前没有找到较好的解决方案
demo
基于本文理论的一个demo，地址：webpack-multipage-demo
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。