webpack多页应用架构系列：一步一步解决架构痛点

Posted 2021-04-29 前端乖乖

这系列文章讲什么？

本系列文章主要介绍如何用webpack这一当前流行的构建工具来设计一个多页应用的架构。请注意，本文并非新手教程，着重点更多是在于提供解决问题的思路，而非手把手带你装逼。

作者介绍

本人供职于某互联网物流公司，专职前端，公司虽仍处于创业阶段，但产品线已经拉得挺长的了，因此所碰到的痒点、痛点也不少。我本是phper出身，对传统前端茹毛饮血的境况恨之入骨，幸得webpack这一神器，我感觉现在写前端已经跟写PHP差不多了（大误）。

示例代码

诸位看本系列文章，搭配我的脚手架项目食用更佳哦（笑）：。
上个文件目录结构让大家一睹为快：

1. ├─build # 编译后生成的所有代码、资源（图片、字体等，虽然只是简单的从源目录迁移过来） 

2. ├─node_modules # 利用npm管理的所有包及其依赖 

3. ├─vendor # 所有不能用npm管理的第三方库 

4. ├─.babelrc # babel的配置文件 

5. ├─.eslintrc # ESLint的配置文件 

6. ├─index.html # 仅作为重定向使用 

7. ├─package.json # npm的配置文件 

8. ├─webpack.config.js # webpack的配置文件 

9. ├─src # 当前项目的源码 

10.     ├─pages # 各个页面独有的部分，如入口文件、只有该页面使用到的css、模板文件等 

11.     │  ├─alert # 业务模块 

12.     │  │  └─index # 具体页面 

13.     │  ├─index # 业务模块 

14.     │  │  ├─index # 具体页面 

15.     │  │  └─login # 具体页面 

16.     │  │      └─templates # 如果一个页面的HTML比较复杂，可以分成多块再拼在一起 

17.     │  └─user # 业务模块 

18.     │      ├─edit-password # 具体页面 

19.     │      └─modify-info # 具体页面 

20.     └─public-resource # 各个页面使用到的公共资源 

21.         ├─components # 组件，可以是纯HTML，也可以包含js/css/image等，看自己需要 

22.         │  ├─footer # 页尾 

23.         │  ├─header # 页头 

24.         │  ├─side-menu # 侧边栏 

25.         │  └─top-nav # 顶部菜单 

26.         ├─config # 各种配置文件 

27.         ├─iconfont # iconfont的字体文件 

28.         ├─imgs # 公用的图片资源 

29.         ├─layout # UI布局，组织各个组件拼起来，因应需要可以有不同的布局套路 

30.         │  ├─layout # 具体的布局套路 

31.         │  └─layout-without-nav # 具体的布局套路 

32.         ├─less # less文件，用sass的也可以，又或者是纯css 

33.         │  ├─base-dir 

34.         │  ├─components-dir # 如果组件本身不需要js的，那么要加载组件的css比较困难，我建议可以直接用less来加载 

35.         │  └─base.less # 组织所有的less文件 

36.         ├─libs # 与业务逻辑无关的库都可以放到这里 

37.         └─logic # 业务逻辑

架构痛点痒点一览（并非系列文章的所有内容）

• SPA好复杂，我还是喜欢传统的多页应用怎么破？又或是，我司项目需要后端渲染，页面模板怎么出？

• 每个页面相同的UI布局好难维护，UI稍微改一点就要到每个页面去改，好麻烦还容易漏，怎么破？

• 除js外的资源如css/less、图片、swf、字体等，要怎么打包呢？不然老是要外部引用，迁移、部署起来都好麻烦呢。

• 某些年久失修的jQuery插件怎么在webpack里使用呢？

• 能不能整合进ESLint来检查语法？

• 能不能整合postcss来加强浏览器兼容性？

• 部署代码的时候如何清除用户浏览器遗留下来的上个版本的缓存？

后续发展

我相信，架构不是一蹴而就的，而是一个不断迭代的过程，每跨过一个坑、每解决一个痛点痒点，都能使架构更加健壮；因此，我也将把我后续对架构的优化继续撰写成文章（不过当然是先把目前架构的内容写完啦哈哈哈哈），并相应地改写示例代码（其实说不定是我先在示例代码试验过后再搬到实际项目里使用呢）。

【关于作者】

Array-Huang，web开发者

技术博客：

GitHub：

【您可能感兴趣的文章】

一、

二、

三、

四、

五、

六、

七、

八、

九、

十、

前端圈--打造专业的前端技术会议

为web前端开发者提供技术分享和交流的平台

打造一个良好的前端圈生态，推动web标准化的发展

官网：http://fequan.com

投稿：[e-mail]

赞助合作：[e-mail]