帝王谷资源网 Design By www.wdxyy.com
写在前面
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配置
入口文件
// 获取入口文件 var entries = (function() { var jsDir = path.resolve(__dirname, 'src/static/js/services'); var entryFiles = glob.sync(jsDir + '/*.js'); var map = {}; entryFiles.forEach(function(filePath) { var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.')); map[filename] = filePath; }); return map; })();
该方法将生成文件名到文件绝对路径的map, 比如
entry: { 'page-1': '/../webpack-multipage-demo/src/static/js/services/page-1.js' }
热更新
热更新简直不要太好用,极大地提高了开发效率。
//服务器配置 var devServer = env === 'production' "htmlcode">var htmlPages = (function() { var artDir = path.resolve(__dirname, 'src/views'); var artFiles = glob.sync(artDir + '/*.art'); var array = []; artFiles.forEach(function(filePath) { var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.')); array.push(new HtmlWebpackPlugin({ template: path.resolve(__dirname, 'src/template/index.html'), filename: filename + '.html', chunks: ['vendor', 'main', filename], chunksSortMode: function(chunk1, chunk2) { var order = ['vendor', 'main', filename]; var order1 = order.indexOf(chunk1.names[0]); var order2 = order.indexOf(chunk2.names[0]); return order1 - order2; }, minify: { removeComments: env === 'production' "_blank" href="https://github.com/Claralll/webpack-multipage-demo/tree/master" rel="external nofollow" >webpack-multipage-demo
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
帝王谷资源网 Design By www.wdxyy.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
帝王谷资源网 Design By www.wdxyy.com
暂无评论...
更新日志
2024年11月01日
2024年11月01日
- 群星《戏梦》[FLAC/分轨][308.4MB]
- 魔兽世界永久60级什么时间开 永久60级开启时间介绍
- 魔兽世界奥卡兹岛血藻刷新点一览 wlk奥卡兹岛血藻刷新位置介绍
- 英雄联盟s14中国队种子怎么排名 s14中国队种子队伍排名一览
- 柏菲·梁玉嵘《知音梁品》限量开盘母带ORMCD[低速原抓WAV+CUE]
- [东升唱片]孙露《寂寞诱惑AQCD》高码率[FLAC]
- 群星-第8届2012十大发烧唱片精选HQ2CD[WAV+CUE]
- 九号公司两轮电动安全季行动圆满收官:为行业树立安全管理新标杆
- 创新驱动未来 中国移动5G云游戏深化智能运维应用推动行业发展
- 大型手游“帧数拉满” 骁龙8至尊版游戏表现强悍
- 谢金燕.2002-YOYO姊妹【华特】【WAV+CUE】
- 群星.1994-摇滚列车【音乐家】【WAV+CUE】
- 陈艾湄.1996-牵绊【巨翼】【WAV+CUE】
- 群星《无法抗拒的谎言 电视剧原声带》[320K/MP3][69.98MB]
- 群星《无法抗拒的谎言 电视剧原声带》[FLAC/分轨][372.04MB]