1. 程式人生 > >webpack核心概念詳解及其執行原理

webpack核心概念詳解及其執行原理

* Entry: 入口, webpack執行構建的第一步將從Entry開始,可抽象成輸入

* Module: 模組,在webpcak中一切皆模組,一個模組對應一個檔案。webpack會從配置的Entry開始遞迴找出所有依賴的模組。

* Chunk: 程式碼塊,一個Chunk由多個模組組合而成,用於程式碼合併於分割

*Loader: 模組轉換器,用於將模組的原內容按照需求轉換成新內容。

*Plugin: 擴充套件外掛,在webpcak構建流程中的特定時機注入擴充套件邏輯,來改變構建結果或做我們想要的事情

*Outout: 輸出結果,再webpack經過一些列處理並得出最終想要的程式碼後輸出結果

     webpcak在啟動後會從Entry裡配置的Module開始,遞迴解析Entry依賴的所有Module.每找到一個Module,就會根據配置的Loader去找出對應的轉換規則,對Module進行轉換後,再解析出當前Module依賴的Module。這些模組會以Entry為單位進行分組,一個Entry及其所有依賴的Module被分到一個組也就是一個Chunk.最後,webpack會將所有Chunk轉換成檔案輸出。在整個流程中,webpack會在恰當的時機執行Plugin裡定義的邏輯。