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

Lowky 发布于2019-08-20 10:50 / 1481人阅读

摘要：本文首发于的技术博客实用至上，非经作者同意，请勿转载。原文地址如果您对本系列文章感兴趣，欢迎关注订阅这里这系列文章讲什么本系列文章主要介绍如何用这一当前流行的构建工具来设计一个多页应用的架构。

本文首发于Array_Huang的技术博客——实用至上，非经作者同意，请勿转载。
原文地址：https://segmentfault.com/a/1190000006843916
如果您对本系列文章感兴趣，欢迎关注订阅这里：https://segmentfault.com/blog/array_huang

这系列文章讲什么？

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

作者介绍

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

示例代码

诸位看本系列文章，搭配我的脚手架项目食用更佳哦（笑）：Array-Huang/webpack-seed(https://github.com/Array-Huang/webpack-seed)。
上个文件目录结构让大家一睹为快：

├─build # 编译后生成的所有代码、资源（图片、字体等，虽然只是简单的从源目录迁移过来）
├─node_modules # 利用npm管理的所有包及其依赖
├─vendor # 所有不能用npm管理的第三方库
├─.babelrc # babel的配置文件
├─.eslintrc # ESLint的配置文件
├─index.html # 仅作为重定向使用
├─package.json # npm的配置文件
├─webpack.config.js # webpack的配置文件
├─src # 当前项目的源码
    ├─pages # 各个页面独有的部分，如入口文件、只有该页面使用到的css、模板文件等
    │  ├─alert # 业务模块
    │  │  └─index # 具体页面
    │  ├─index # 业务模块
    │  │  ├─index # 具体页面
    │  │  └─login # 具体页面
    │  │      └─templates # 如果一个页面的HTML比较复杂，可以分成多块再拼在一起
    │  └─user # 业务模块
    │      ├─edit-password # 具体页面
    │      └─modify-info # 具体页面
    └─public-resource # 各个页面使用到的公共资源
        ├─components # 组件，可以是纯HTML，也可以包含js/css/image等，看自己需要
        │  ├─footer # 页尾
        │  ├─header # 页头
        │  ├─side-menu # 侧边栏
        │  └─top-nav # 顶部菜单
        ├─config # 各种配置文件
        ├─iconfont # iconfont的字体文件
        ├─imgs # 公用的图片资源
        ├─layout # UI布局，组织各个组件拼起来，因应需要可以有不同的布局套路
        │  ├─layout # 具体的布局套路
        │  └─layout-without-nav # 具体的布局套路
        ├─less # less文件，用sass的也可以，又或者是纯css
        │  ├─base-dir
        │  ├─components-dir # 如果组件本身不需要js的，那么要加载组件的css比较困难，我建议可以直接用less来加载
        │  └─base.less # 组织所有的less文件
        ├─libs # 与业务逻辑无关的库都可以放到这里
        └─logic # 业务逻辑

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

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

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

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

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

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

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

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

后续发展

我相信，架构不是一蹴而就的，而是一个不断迭代的过程，每跨过一个坑、每解决一个痛点痒点，都能使架构更加健壮。

附系列文章目录（同步更新）

webpack多页应用架构系列（一）：一步一步解决架构痛点：https://segmentfault.com/a/1190000006843916

webpack多页应用架构系列（二）：webpack配置常用部分有哪些？:https://segmentfault.com/a/1190000006863968

webpack多页应用架构系列（三）：怎么打包公共代码才能避免重复？:https://segmentfault.com/a/1190000006871991

webpack多页应用架构系列（四）：老式jQuery插件还不能丢，怎么兼容？:https://segmentfault.com/a/1190000006887523

webpack多页应用架构系列（五）：听说webpack连less/css也能打包？:https://segmentfault.com/a/1190000006897458

webpack多页应用架构系列（六）：听说webpack连图片和字体也能打包？:https://segmentfault.com/a/1190000006907701

webpack多页应用架构系列（七）：开发环境、生产环境傻傻分不清楚？:https://segmentfault.com/a/1190000006952432

webpack多页应用架构系列（八）：教练我要写ES6！webpack怎么整合Babel？:https://segmentfault.com/a/1190000006992218

webpack多页应用架构系列（九）：总有刁民想害朕！ESLint为你阻击垃圾代码:https://segmentfault.com/a/1190000007030775

webpack多页应用架构系列（十）：如何打造一个自定义的bootstrap:https://segmentfault.com/a/1190000007043716

webpack多页应用架构系列（十一）：预打包Dll，实现webpack音速编译:https://segmentfault.com/a/1190000007104372

webpack多页应用架构系列（十二）：利用webpack生成HTML普通网页&页面模板:https://segmentfault.com/a/1190000007126268

webpack多页应用架构系列（十三）：构建一个简单的模板布局系统:https://segmentfault.com/a/1190000007159115

webpack多页应用架构系列（十四）：No复制粘贴！多项目共用基础设施

webpack多页应用架构系列（十五）：论前端如何在后端渲染开发模式下夹缝生存

webpack多页应用架构系列（十六）：善用浏览器缓存，该去则去，该留则留

本文首发于Array_Huang的技术博客——实用至上，非经作者同意，请勿转载。
原文地址：https://segmentfault.com/a/1190000006843916
如果您对本系列文章感兴趣，欢迎关注订阅这里：https://segmentfault.com/blog/array_huang

云服务器 GPU云服务器一步一步写java php撤回一步走一步进一步

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80351.html

webpack多页应用架构系列（十三）：构建一个简单的模板布局系统

摘要：原文地址如果您对本系列文章感兴趣，欢迎关注订阅这里前言上文多页应用架构系列十二利用生成普通网页页面模板我们基本上已经搞清楚如何利用来生成普通网页页面模板，本文将以我的脚手架项目介绍如何在这基础上搭建一套简单的模板布局系统。本文首发于Array_Huang的技术博客——实用至上，非经作者同意，请勿转载。原文地址：https://segmentfault.com/a/1190000007...

yedf 2019-08-20 11:36 评论0 收藏0
webpack多页应用架构系列（三）：怎么打包公共代码才能避免重复？

摘要：在上一篇文章多页应用架构系列二配置常用部分有哪些中，我介绍了如何配置多页应用的入口，然而，如果仅仅如此操作，带来的后果就是，打包生成出来的每一个入口文件都会完整包含所有代码。的初始化常用参数有哪些，给这个包含公共代码的命个名唯一标识。本文首发于Array_Huang的技术博客——实用至上，非经作者同意，请勿转载。原文地址：https://segmentfault.com/a/1190...

oliverhuang 2019-08-22 10:37 评论0 收藏0
webpack多页应用架构系列（九）：总有刁民想害朕！ESLint为你阻击垃圾代码

摘要：本文首发于的技术博客实用至上，非经作者同意，请勿转载。如果你使用了，或类似的，那么，通过编译前后的代码相差就很大了，这会造成两个问题以为例把你的代码转成什么样你自己是无法控制的，这往往导致无法通过的审查。本文首发于Array_Huang的技术博客——实用至上，非经作者同意，请勿转载。原文地址：https://segmentfault.com/a/1190000007030775如果您...

dingding199389 2019-08-20 11:20 评论0 收藏0
webpack多页应用架构系列（十一）：预打包Dll，实现webpack音速编译

摘要：本文首发于的技术博客实用至上，非经作者同意，请勿转载。原文地址如果您对本系列文章感兴趣，欢迎关注订阅这里前言书承上文多页应用架构系列十如何打造一个自定义的。终于，发现了这一大杀器，打包时间过长的问题得到完美解决。本文首发于Array_Huang的技术博客——实用至上，非经作者同意，请勿转载。原文地址：https://segmentfault.com/a/119000000710437...

sixleaves 2019-08-20 11:33 评论0 收藏0
webpack多页应用架构系列（四）：老式jQuery插件还不能丢，怎么兼容？

摘要：本文首发于的技术博客实用至上，非经作者同意，请勿转载。怎么来兼容老式插件呢方法有不少，下面一个一个来看。与上述的方案相反，此方案是先用加载的满足老式插件的需要，再通过将其转换成符合模块化要求的。本文首发于Array_Huang的技术博客——实用至上，非经作者同意，请勿转载。原文地址：https://segmentfault.com/a/1190000006887523如果您对本系列文...

Chao 2019-08-22 10:38 评论0 收藏0