Webpack构建多页应用Mpa：阐述设计概要

Posted 2021-07-07 IT飞牛

应用场景

如果现在要做一个前后端分离的项目，可能第一反应就是使用市面上很火的三大MVVM框架（Vue、React、Angular）。
但如果团队没有专职前端，并且项目预留时间也很紧张，没足够时间去系统学习工程化Vue项目，但是却也想让html、css、js这些代码被打包压缩，尽可能减少文件大小；

针对这种场景，有没有办法可以快速构建一套前端页面体系，只要求掌握div+css+jq+ajax这些简单技术，就能快速去开发？
答案是：可以，使用webpack构建

webpack构建多页面应用优点：

• 生成更少的文件
• 生成更小的文件
• 工程化项目，高效管理
• 渐进式开发（只要会div+css+jq+ajax就能开发）
• 丰富的loader和插件（打包、压缩混淆、图片转base64、热更新…）

目标

希望最终能产出一套切实可用的Mpa整体方案，相比传统前端多页面项目，提升开发效率、减少文件产出。

这里演示做一个简单的个人博客，会有这些个页面：博客首页、博文详情页、搜索页、分类、tag标签页、月归档页，下面是项目文件结构：

每个页面都包含同样的index.html、index.js、index.css，分别放html代码、js逻辑和css样式。
除了每个页面特性化代码，还可以考虑把公共html、js、css代码封装，方便复用。

最终打包后的文件结构：

持续更新中…

---