webpack是什麼

webpack是一個模組捆綁器，適用於最大的單頁Web應用程序，可以與單獨的任務運行器捆綁在一起，它可以處理JavaScript，CSS等。 webpack是前端開發人員工具組的一個很好的補充，使用webpack，Web開發更快，更有效率，更有趣。

什麼是模組捆綁器？

在大多數程式語言中，我們可以將程式碼分成多個文件，並將這些文件匯入到應用程式中，以使用其中包含的功能。這並不是內建在瀏覽器中的，因此建立模組捆綁器會將這種功能以多種形式提供：透過非同步載入模組並在載入完成後運行它們；或者透過將所有必需的檔案組合到一個JavaScript文件中，在透過HTML中的 標籤載入。

如果沒有模組載入器和捆綁器，我們也可以隨時手動組合檔案或將HTML載入到無數 標籤中，但這有幾個缺點：

1、我們需要追蹤文件應加載的正確順序，包括哪些文件取決於哪些其他文件，並確保不包含不需要的任何文件。

2、多個 標籤意味著多次呼叫伺服器來載入所有程式碼，這對效能來說更糟。

3、需要大量的手動工作，而不是讓電腦為你做這些工作。

為什麼要選擇Webpack？

選擇Webpack，有以下幾個原因：

1、它相對新穎，因為它能夠解決或避免其前輩中出現的缺點和問題。

2、入門很簡單。如果我們只是想將一堆JavaScript檔案捆綁在一起而沒有任何其他花哨的東西，甚至不需要設定檔。

3、它的插件系統讓它能夠做得更多，使它非常強大。因此，它可能是我們需要的唯一建置工具。

Webpack的執行過程

#Webpack從條目（entry）開始工作，通常這些是JavaScript模組，其中webpack開始其遍歷過程。在此過程中，webpack會根據載入器配置評估條目（entry）匹配，這些配置告訴webpack如何轉換每個匹配。

解析流程

條目（entry）本身就是一個模組。當webpack遇到一個條目時，webpack會嘗試使用條目的resolve配置將條目與檔案系統進行配對。除了node_modules之外，我們也可以告訴webpack對特定目錄執行查找。也可以調整webpack與檔案副檔名相符的方式，並且可以為目錄定義特定的別名。該耗竭與包章涵蓋了更詳細的這些想法。

如果解析通過失敗，webpack會引發執行時期錯誤。如果webpack設法正確解析文件，webpack將根據載入器定義對符合的文件執行處理。每個載入器對模組內容套用特定的轉換。

可以透過多種方式配置載入程式與已解析檔案相符的方式，包括檔案類型和檔案系統中的位置。 Webpack的靈活性甚至允許我們根據文件導入項目的位置對文件套用特定的轉換。

對webpack的載入器執行相同的解析過程。 Webpack允許我們在決定應使用哪個載入器時套用類似的邏輯。由於這個原因，裝載程式已經解析了自己的配置。如果webpack無法執行載入程式查找，則會引發執行時間錯誤。

總結： 以上就是這篇文章的全部內容，希望能對大家的學習有所幫助。