深入淺出webpack學習(15)--管理多個單頁應用

iamyoung001 發布于2019-08-22 15:25 / 3054人閱讀

摘要：實際的做法是按照功能模塊劃分成多個單頁應用，每個單頁應用生成一個文件。隨著業務的發展，后面可能會不斷的加入新的單頁應用，但是每次新加入單頁應用不能去改動構建相關的代碼。并且分別為每個單頁應用生成一個配置和配置。

在實際應用中一個完整的系統不會把所有的功能都做到一個網頁中，因為這會導致網頁性能不佳。實際的做法是按照功能模塊劃分成多個單頁應用，每個單頁應用生成一個HTML文件。之前我們解決了自動化生成HTML文件，接下來繼續改造上一節的例子：

項目目前共有兩個單頁應用組成，一個是主頁index.html, 一個是login.hml

多個單頁應用之間會有公共代碼部分，需要將這些公共代碼部分抽離出來放到多帶帶的文件中防止重復加載。

隨著業務的發展，后面可能會不斷的加入新的單頁應用，但是每次新加入單頁應用不能去改動構建相關的代碼。

按照上節的思路，可能要為每個單頁應用配置一段如下代碼：

new WebPlugin({
    template: "./template.html", //HTML模板文件所在的文件路徑
    file: "login.html" //輸出的HTML的文件名稱
})

并且把頁面對應的入口加入到entry配置項中，就像這樣：

entry: {
    index: "./page/index/index.js", //頁面index.html的入口文件
    login: "./page/login/index.js"， //頁面login.html的入口文件
}

當有新頁面加入時就需要修改webpack配置文件，新插入一段以上代碼，這會導致構建代碼難以維護并且易錯。

解決方案

上一節中的web-webpack-plugin插件也內置了這個解決辦法，上一節只用了他的webPlugin，這節將使用它的AutoWebPlugin來解決以上問題。
項目源碼結構如下：

├── pages
│   ├── index
│   │   ├── index.css // 該頁面多帶帶需要的 CSS 樣式
│   │   └── index.js // 該頁面的入口文件
│   └── login
│       ├── index.css
│       └── index.js
├── common.css // 所有頁面都需要的公共 CSS 樣式
├── google_analytics.js
├── template.html
└── webpack.config.js

從目錄結構中可以看出以下幾點要求：

所有單頁應用的代碼都需要放到一個目錄下：例如pages目錄下；

一個單頁應用一個多帶帶的文件夾，例如最后勝出index.html相關的代碼都在index目錄下

每個單頁應用的目錄下都有一個index.js文件作為入口執行文件。

雖然 AutoWebPlugin 強制性的規定了項目部分的目錄結構，但從實戰經驗來看這是一種優雅的目錄規范，合理的拆分了代碼，又能讓新人快速的看懂項目結構，也方便日后的維護。

webpack配置文件修改如下：

const { AutoWebPlugin } = require("web-webpack-plugin")

// 使用本文的主角 AutoWebPlugin，自動尋找 pages 目錄下的所有目錄，把每一個目錄看成一個單頁應用
const autoWebPlugin = new AutoWebPlugin("pages", {
  template: "./template.html", // HTML 模版文件所在的文件路徑
  postEntrys: ["./common.css"],// 所有頁面都依賴這份通用的 CSS 樣式文件
  // 提取出所有頁面公共的代碼
  commonsChunk: {
    name: "common",// 提取出公共代碼 Chunk 的名稱
  },
});

module.exports = {
  // AutoWebPlugin 會為尋找到的所有單頁應用，生成對應的入口配置，
  // autoWebPlugin.entry 方法可以獲取到所有由 autoWebPlugin 生成的入口配置
  entry: autoWebPlugin.entry({
    // 這里可以加入你額外需要的 Chunk 入口
  }),
  plugins: [
    autoWebPlugin,
  ],
};

AutoWebPlugin會找出pages目錄下的2個文件夾index和login，把這兩個文件夾看成兩個單頁應用。并且分別為每個單頁應用生成一個Chunk配置和WebPlugin配置。每個單頁應用的Chunk名稱就等于文件夾的名稱，也就是說autoWebPlugin.entry()方法返回的內容其實是：

{
  "index":["./pages/index/index.js","./common.css"],
  "login":["./pages/login/index.js","./common.css"]
}

但這些事情 AutoWebPlugin 都會自動為你完成，你不用操心，明白大致原理即可。

GPU云服務器云服務器深入淺出webpack 單頁應用單頁應用cdn 單頁應用程序

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93452.html

Vue.js新手入門指南[轉載]

摘要：就是一個用于搭建類似于網頁版知乎這種表單項繁多，且內容需要根據用戶的操作進行修改的網頁版應用。單頁應用程序顧名思義，單頁應用一般指的就是一個頁面就是應用，當然也可以是一個子應用，比如說知乎的一個頁面就可以視為一個子應用。最近在逛各大網站，論壇，以及像SegmentFault等編程問答社區，發現Vue.js異?；鸨?，重復性的提問和內容也很多，樓主自己也趁著這個大前端的熱潮，著手學習了一...

MartinHan 2019-08-23 11:50 評論0 收藏0
專治前端焦慮的學習方案

摘要：不過今天我希望能夠更進一步，不僅僅再抱怨現狀，而是從我個人的角度來給出一個逐步深入學習生態圈的方案。最后，我還是想提到下對于的好的學習方法就是回顧參照各種各樣的代碼庫，學習人家的用法與實踐。本文翻譯自A-Study-Plan-To-Cure-JavaScript-Fatigue。筆者看到里面的幾張配圖著實漂亮，順手翻譯了一波。本文從屬于筆者的Web Frontend Introduc...

codeGoogle 2019-08-21 14:41 評論0 收藏0
前端資源系列（4）-前端學習資源分享&前端面試資源匯總

摘要：特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。本以為自己收藏的站點多，可以很快搞定，沒想到一入匯總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應和斧正，會及時更新，平時業務工作時也會不定期更...

princekin 2019-08-20 11:28 評論0 收藏0
3月份前端資源分享

摘要：面試如何防騙一份優秀的前端開發工程師簡歷是怎么樣的作為，有哪些一般人我都告訴他，但是他都不聽的忠告如何面試前端工程師更多資源請Star：https://github.com/maidishike... 文章轉自：https://github.com/jsfront/mo... 3月份前端資源分享 1. Javascript 使用judge.js做信息判斷 javascript...

nanchen2251 2019-08-21 15:21 評論0 收藏0
2017年3月份前端資源分享

平日學習接觸過的網站積累，以每月的形式發布。2017年以前看這個網址：http://www.kancloud.cn/jsfron... 03月份前端資源分享 1. Javascript 175453545 Redux compose and middleware 源碼分析深入 Promise(二)——進擊的 Promise Effective JavaScript leeheys blog -...

ermaoL 2019-06-27 16:30 評論0 收藏0