如何理解webpack打包原理

webpack打包原理是根據文件間的依賴關係對其進行靜態分析，將這些模組按指定規則生成靜態資源，當webpack處理程序時，它會遞歸地構建一個依賴關係圖，其中包含應用程式所需的每個模組，將所有這些模組打包成一個或多個bundle。

本文操作環境：Windows7系統，Dell G3電腦。

webpack打包原理是根據文件間的依賴關係對其進行靜態分析，然後將這些模組按指定規則生成靜態資源，當webpack 處理程序時，它會遞歸地構建一個依賴關係圖(dependency graph)，其中包含應用程式所需的每個模組，然後將所有這些模組打包成一個或多個bundle。

webpack有兩種組織模組的依賴方式，同步、非同步。非同步依賴將作為分割點，形成一個新的區塊；在優化了依賴樹之後，每個非同步區塊都將作為一個檔案被打包。

webpack有一個智慧解析器，幾乎可以處理任何第三方函式庫。無論它們的模組形式是CommonJS、AMD或普通的JS檔案；甚至在載入依賴的時候，允許使用動態表require("、/templates/" name "、jade")。

擴充資料

在使用webpack建立的典型應用程式或網站中，有三種主要的程式碼類型：

1、團隊編寫的原始碼。

2、原始碼會依賴的任何第三方的library或"vendor"代碼。

3、webpack的runtime和manifest，管理所有模組的互動。

runtime 包含：在模組互動時，連接模組所需的載入和解析邏輯；包括瀏覽器中的已載入模組的連接，以及懶載入模組的執行邏輯。

想了解更多程式設計學習，請關注php培訓欄位！

以上是如何理解webpack打包原理的詳細內容。更多資訊請關注PHP中文網其他相關文章！