webpack中loader和plugin的概念理解
阿新 • • 發佈:2019-02-11
webpack中loader和plugin這兩個概念很容易為初學者混淆,在這裡,我簡單談談自己的理解。
對於loader,它就是一個轉換器,將A檔案進行編譯形成B檔案,這裡操作的是檔案,比如將A.scss或A.less轉變為B.css,單純的檔案轉換過程;
對於plugin,它就是一個擴充套件器,它豐富了wepack本身,針對是loader結束後,webpack打包的整個過程,它並不直接操作檔案,而是基於事件機制工作,會監聽webpack打包過程中的某些節點,例如
run
:開始編譯make
:從entry開始遞迴分析依賴並對依賴進行buildbuild-moodule
:使用loader載入檔案並build模組normal-module-loader
:對loader載入的檔案用acorn編譯,生成抽象語法樹ASTprogram
:開始對AST進行遍歷,當遇到require
時觸發call require
事件seal
:所有依賴build完成,開始對chunk進行優化(抽取公共模組、加hash等)optimize-chunk-assets
:壓縮程式碼emit
:把各個chunk輸出到結果檔案