Webpack學習－工做原理（上）

• 原文地址：http://wushaobin.top/2019/02/12/webpackPrinciple/

對於webpack的認識始終停留在對腳手架的使用，不得不說腳手架既方便又好用，修改起來也方便，只須要知道webpack中各個配置項的功能，因而對於咱們來講，webpack始終就是一個黑盒子，咱們徹底不清楚裏面是如何去運做的。打包時報錯，就只能藉助google來協助幫忙解決問題，至於爲何要這樣解決，什麼原理，無論，能解決就好。那麼，瞭解一下基本原理也是有必要。

概念

言歸正傳，咱們一塊兒瞭解一下webpack運行基本原理，首先先明白幾個核心概念，

• Entry：入口，webpack構建的起始
• Module：模塊，webpack裏面一切皆模塊，也是表明着文件，從Entry配置的入口文件開始，遞歸找出依賴的模塊
• Chunk：代碼塊，找出遞歸依賴模塊經轉換後組合成代碼塊
• Loader：模塊轉換器，也就是將模塊的內容按照需求裝換成新內容
• Plugin：擴展插件，webpack構建過程當中，會在特定的時機廣播對應的事件，而插件能夠監聽這些事件的發生

流程

webpack構建流程，詳細過程以下：

• 初始化：從配置文件或是shell讀取與合併參數，獲得最終參數，實例化插件new Plugin()
• 開始編譯：經過上一步初始化獲得的最終參數，初始化一個Compiler對象，加載插件（依次調用插件中的apply方法），經過執行Compiler.run開始編譯
• 肯定入口：根據配置中entry找出全部入口文件
• 編譯模塊：從entry出發，調用配置的loader，對模塊進行轉換，同時找出模塊依賴的模塊（如何找？見下文），依次遞歸，直到全部依賴模塊完成本步驟處理
• 完成模塊編譯：這一步已經使用loader對全部模塊進行了轉換，獲得了轉換後的新內容以及依賴關係
• 輸出資源： 根據入口與模塊之間的依賴關係，組裝成一個個chunk代碼塊，而且生成文件輸出列表
• 輸出成功：根據配置中的輸出路徑和文件名，將文件寫入文件系統，完成構建

事件

整個構建流程會發生不少的事件，來供Plugin監聽，這些事件具體的能夠分爲三個階段，分別是初始化階段、編譯階段、輸出階段，那麼具體有哪些事件，這裏按階段分別介紹，

初始化階段

事件	做用
初始化	從配置文件或是shell讀取與合併參數，獲得最終參數，依次實例化插件new Plugin()
實例化Compiler	經過上一步初始化獲得的最終參數，初始化一個Compiler對象，負責監聽文件和啓動編譯，全局只有一個Compiler對象
加載插件	依次調用插件中的apply方法，同時也會將Compiler實例傳入，就能夠調用Webpack提供的api，Compiler實例能夠說是就是Webpack的實例
environment	將node.js風格的文件系統應用到compiler對象，即可以直接經過compiler來對文件進行操做
entry-option	讀取配置中的entry，依次實例化出對應EntryPlugin，爲後面該entry的遞歸解析工做作準備
after-plugins	調完全部內置和配置的插件的apply方法
after-resolvers	根據配置初始化resolvers，resolvers負責在文件系統中尋找制定路徑的文件

編譯階段

事件	做用
run	啓動一次新的編譯，調用Compiler.run()
watch-run	和run相似，區別在於它是在監聽模式下進行編譯的，這個事件能夠獲取哪些文件發生了變化從而致使新的一次編譯
compile	告訴插件新的一次編譯即將啓動，而且給插件帶上compiler對象
compilation	每當檢測到文件的變化，都會有一次新的compilation被建立，一個compilation對象包含了當前的模塊資源、編譯生成的資源、變化的文件等等的屬性和方法，同時記住，在不少事件的的回調中都會將compilation傳入，以便使用
make	一個新的Compilation建立完畢，那麼就會從entry配置中開始讀取文件，使用配置好的loader對文件進行編譯，編譯完後再找出文件依賴的文件，遞歸地去編譯和解析
after-compile	一次Compilation執行完成
invalid	文件編譯錯誤等異常觸發該事件,不會致使webpack退出

Compilation的事件

事件	做用
build－moudle	使用對應的loader去轉換一個模塊
normal－module－loader	在用loader轉換一個模塊後，會使用acorn解析轉換後的內容輸出對應的抽象語法樹（ast）,以便webpack後面分析代碼使用
program	從配置的入口開始，分析生成的ast，遇到require等導入語句時，便會將其加入依賴模塊列表，而且對找出的依賴進行遞歸分析，最終能夠弄清全部依賴關係
seal	全部模塊及其依賴的模塊都經過Loader轉換完成，根據依賴關係生成chunk

輸出階段

事件	做用
should－emit	全部須要輸出的文件都生成，準備輸出，詢問哪些文件須要輸出，哪些不須要輸出
emit	肯定好要輸出哪些文件後，並執行文件輸出，能夠在這裏獲取和修改輸出的內容
after－emit	文件輸出完畢
done	完成一次完整的編譯和輸出流程
failed	編譯和輸出過程當中運到異常，致使webpack退出，會直接到這個步驟，能夠在這裏獲取具體緣由

總結

Webpack是很好的前端資源加載和打包工具，在webpack裏一切皆模塊，很好地處理文件之間的依賴關係，這裏咱們介紹的是些理論性的知識，瞭解基本概念，知道整個流程是怎麼樣的，webpack是串行流水線運行的，工做期間會有不少廣播事件，來供插件使用，這裏咱們介紹了各個階段的事件以及做用，具體代碼表示形式，後續文章會引入。