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