webpack 原理解析簡述

如需轉載 請與本人聯繫

面向讀者

本文面向那些須要或者想了解開發 webpack plugin 和想要深究 webpack 源碼可是無處下手的人羣。這篇文章會帶你大體瞭解 webpack 原理與執行流程，具體的源碼限於篇幅暫不討論，後面會考慮出一系列 webpack 源碼解析系列與 webpack 經典插件解析。

webpack 初始化流程

webpack是基於插件體系的構建工具，插件的具體實現方式是依賴與tapable庫，當咱們在本地執行 webpack 構建是，會調用 webpack(option) 方法，以後會對 option 作一次校驗合法性並作默認選項賦值，而後調用envplugin，這個插件主要是對fs作一層緩存，而後在每次編譯前對緩存作一次清除，以後再調用 WebpackOptionsApply 綁定webpack核心流程自帶須要的全部插件。若是你打開這個文件你會發現綁定的插件很是多，這裏重點提一下你須要關注一下如下插件：

LoaderTargetPlugin
JavascriptModulesPlugin
EntryOptionPlugin
RuntimePlugin
CompatibilityPlugin
HarmonyModulesPlugin
CommonJsPlugin
LoaderPlugin
CommonJsStuffPlugin
RequireContextPlugin
NamedChunkIdsPlugin
NamedModuleIdsPlugin
TemplatedPathPlugin
複製代碼

其他插件所有註釋掉保留以上插件，運行 webpack 基礎功能依然可用，即只須要以上插件既能夠造成一個mini版的webpack，這也是咱們閱讀源碼時關注的重點所在。
到此爲止完成了webpack初始化的一些配置，接下來會調用 webpack.run 方法執行編譯流程

編譯流程

run 階段首先會初始化compication（這個對象時每次編譯都會從新生成的對象）。
接下來調用 make 插件觸發編譯流程，這裏會獲取咱們option中配置的 entry 對象。經過 resolvefactory 根據這個entry對象查詢文件的context ，絕對路徑，項目依賴以及相關 loader匹配 等信息，依據這些建立爲一個入口模塊。建立完成後會執行編譯，這裏主要時經過 runloader 執行咱們的匹配的 loader ，並將結果存儲到模塊中，執行完畢後會執行 parse 插件，這是會調用webpack魔改的arcon生成ast並遍歷ast語法樹，webpack對ast遍歷的estree的每一個節點設置不一樣的 parse hook 好比若是咱們想要對import作處理咱們須要在ast 節點中的 ImportDeclaration對應的plugin中綁定具體的執行函數，webpack中經過HarmonyModulesPlugin對ast掃描import與exprt語法，來生成 entry 入口文件的依賴文件，這樣就能夠造成遞歸，即對這些依賴文件繼續建立爲模塊，執行loader，掃描ast等操做，到此爲止就構成了整個文件的加載掃描與執行loader等過程。
接下來會調用finish 執行webpack的一些錯誤異常處理，再以後經過調用seal 插件，初始化chunkGraph，entryPoint，執行文件拼接，生成assertfile，再寫入本地文件， 到此整個編譯流程執行完畢

總結

以上只是webpack執行的簡單流程解析，能夠幫助你閱讀源碼以及插件的執行時間點，固然webpack遠不止這些，每一個執行流程能夠都包含一大塊東西要說，好比resolvefactory、runloader、estree、緩存等，還有其餘的一些優化類的插件，有時間後續會出一些列插件源碼解析，幫助深刻理解webpack原理