深刻淺出webpack學習(1)--核心概念

看了網上一個教程，作些記錄，從頭學習一下webpack~關於安裝之類的就不介紹了，首先了解下核心概念。感受首先知道這些概念仍是挺重要的。

核心概念

• Entry：入口，webpack執行構建的第一步從Entry開始，能夠抽象成輸入。
• Module：模塊，在webpack中一切皆模塊，一個模塊對應着一個文件，webpack會從配置的Entry開始遞歸找出全部依賴的模塊。
• Chunk：代碼塊，一個Chunk由多個模塊組合而成，用於代碼合併和分割。
• Loader：模塊轉換器，用於把模塊原內容按照需求轉換成新內容。
• Plugin：擴展插件，在webpack構建流程中的特定時機注入擴展邏輯來改變構建結果或作你想要的事情。
• Output：輸出結果，在webpack通過一系列處理並得出最終想要的代碼後輸出結果。

webpack會在啓動後從Entry裏配置的Module開始遞歸解析Entry依賴的全部Module，每找到一個Module，就會根據配置的loader去找對應的轉換規則，對Module進行轉換後，再解析出當前Module依賴的Module。這些模塊會以Entry爲單位進行分組，一個Entry和其餘全部依賴的Module被分到一個組就是一個Chunk。最後webpack會把全部Chunk轉換成文件輸出。在整個流程中webpack會在恰當的時機執行Plugin裏定義的邏輯。

在實際開發中可能會遇到不一樣的場景，瞭解上面大體流程，在之後的開發中就會清楚的知道在對應的位置進行配置。