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

时间 2019-11-05

原文原文链接

本文首发于 Array_Huang的技术博客—— 实用至上，非经做者赞成，请勿转载。
原文地址： http://www.javashuo.com/article/p-vwjprlla-hd.html
若是您对本系列文章感兴趣，欢迎关注订阅这里： https://segmentfault.com/blog/array_huang

这系列文章讲什么？

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

做者介绍

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

示例代码

诸位看本系列文章，搭配个人脚手架项目食用更佳哦（笑）：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来增强浏览器兼容性？
部署代码的时候如何清除用户浏览器遗留下来的上个版本的缓存？

后续发展

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

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

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

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

本文首发于 Array_Huang的技术博客—— 实用至上，非经做者赞成，请勿转载。
原文地址： http://www.javashuo.com/article/p-vwjprlla-hd.html
若是您对本系列文章感兴趣，欢迎关注订阅这里： https://segmentfault.com/blog/array_huang