webpack基本概念 打包流程和熱更新原理

2022-02-03 09:54:02 字數 2521 閱讀 9793

webpack核心概念

entry: 編譯入口

module: 模組,在 webpack 中,一切皆為模組,乙個模組對應乙個檔案

chunk: **塊,乙個 chunk 由多個模組組合而成,用於**的合併與分割

loader: 模組轉換器,將非js模組轉化為webpack能識別的js模組

plugin: 擴充套件外掛程式,在webpack執行的各個階段,都會廣播出去相對應的事件,外掛程式可以監聽到這些事件的發生,在特定的時機做相對應的事情

webpack核心物件

tapable:控制鉤子的發布與訂閱,compiler和compilation 物件都繼承於 tapable

compiler

compiler 繼承 tapable 物件,可以廣播和監聽 webpack 事件。

compiler 物件是 webpack 的編譯器,webpack 週期中只存在乙個 compiler 物件。

compiler 物件在 webpack 啟動時建立例項,compiler 例項中包含 webpack 的完整配置,包括 loaders, plugins 資訊。

compilation

compilation 繼承 tapable 物件,可以廣播和監聽 webpack 事件。

compilation 例項僅代表一次 webpack 構建和生成編譯資源的的過程。

webpack 開發模式開啟 watch 選項,每次檢測到入口檔案模組變化時,會建立一次新的編譯: 生成一次新的編譯資源和新的 compilation 物件,這個 compilation 物件包含了當前編譯的模組資源 module, 編譯生成的資源,變化的檔案, 依賴的的狀態

webpack基本概念

1. webpack中的module,chunk 和 bundle

module 就是乙個js模組,就是被require或export的模組,例如 es模組,commonjs模組,amd模組

chunk 是 **塊,是進行依賴分析的時候,**分割出來的**塊,包括乙個或多個module,是被分組了的module集合,code spliting之後的就是chunk

bundle 是 檔案,最終打包出來的檔案,通常乙個bundle對應乙個chunk

2. webpack中loader和plugin在作用

loader是檔案轉換器,將webpack不能處理的模組轉換為webpack能處理的模組,就是js模組

plugin是功能擴充套件,干預webpack的打包過程,修改編譯結果或打包結果

webpack打包流程

1. 生成options (將webpack.config.js和shell中的引數,合併中options物件)

2. 例項化complier物件 (webpack全域性的配置物件,包含entry,output,loader,plugins等所有配置資訊)

3. 例項化compilation物件 (compiler.run方法執行,開始編譯過程,生成compilation物件)

4. 分析入口js檔案,呼叫ast引擎(acorn)處理入口檔案,生成抽象語法樹ast,根據ast構建模組的所有依賴

5. 通過loader處理入口檔案的所有依賴,轉換為js模組,生成ast,繼續遍歷,構建依賴的依賴,遞迴,直至所有依賴分析完畢

6. 對生成的所有module進行處理,呼叫plugins,合併,拆分,生成chunk

7. 將chunk生成為對應bundle檔案,輸出到目錄

webpack熱更新的原理

基本原理,webpack監聽檔案變化,服務端和客戶端有websocket通訊,服務端想客戶端傳送檔案變化訊息,

客戶端根據檔案變化訊息獲取變更模組**,進行模組**的熱替換

1. 配置開啟熱更新,設定entry格式和webpack-dev-server的option,使得打包的bundle裡面包含hmr runtime和websocket連線的**

2. webpack-dev-server通過express啟動服務端

3. 客戶端通過sockjs和服務端建立websocket長連線

4. webpack監聽檔案變化,檔案儲存觸發webpack重新編譯,編譯後的**儲存在記憶體中,不在output.path中產生輸出

5. 編譯會生成hash值,hot-update.json(已改動模組的json),hot-update.js(已改動模組的js)

6. 通過socket想客戶端傳送hash值

7. 客戶端對比hash值,一致在走快取,不一致則

通過ajax獲取hot-update.json,json包含模組hash值

再通過jsonp請求獲取hot-update.js

8. 熱更新js模組,若失敗,則live reload重新整理瀏覽器代替熱更新(若模組未配置熱更新,則同樣live reload)

基本概念 C 基本概念

由於工作中需要用到c 編寫的一些工具,有時候需要根據需求修改或者定製工具,所以現在不得不學習一下c 的基礎語法,此為筆記,不成章法!機器語言 組合語言 高階語言 面向過程的程式設計方法 物件導向的程式設計方法 泛型程式設計方法 1 演算法設計 2 源程式編輯 3 編譯 4 連線 5 執行除錯 輸入裝...

基本概念 數控系統基本概念

第一章 基本概念 數控工具機cnc是一種按事先編制好的加工零件程式進行加工的高效 自動化加工裝置。是 computer numerical control machine tools 的簡稱。數控工具機較好地解決了複雜 精密 小批量 多品種的零件加工問題,是一種柔性的 高效能的自動化工具機。西門子系...

業務流程管理的基本概念

業務流程 business process 是一種現實世界中的活動,它由一系列邏輯上相關的任務 組成。如果根據恰當的順序和正確的業務規則來執行這些任務,就可以產生業務效果。我們在 需求抽取與業務建模 一章中定義的需求過程,就是乙個典型的業務流程。業務流程管理 business process man...