webpack打包原理是什麼

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

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

webpack只是一個打包模組的機制，只是把依賴的模組轉換成可以代表這些套件的靜態檔案。並不是什麼commonjs或amd之類的模組化規範。 webpack就是要辨識你的入口文件。辨識你的模組依賴，來打包你的程式碼。

至於你的程式碼使用的是commonjs還是amd或es6的import。 webpack都會對其進行分析。來獲取程式碼的依賴。

webpack做的就是分析程式碼。轉換程式碼，編譯程式碼，輸出程式碼。 webpack本身是一個node的模組，所以webpack.config.js是以commonjs形式書寫的(node中的模組化是commonjs規範的)

webpack中每個模組有一個唯一的id，是從0開始遞增的。整個打包後的bundle.js是一個匿名函數自執行。參數則為一個數組。數組的每一項都為個function。 function的內容則為每個模組的內容，並依照require的順序排列。

擴充資料：

webpack 核心概念：

1、Entry

入口起點(entry point)指示webpack 應該使用哪個模組，來作為建立其內部依賴圖的開始。進入入口起點後，webpack 會找出有哪些模組和函式庫是入口起點（直接和間接）依賴的。每個依賴項隨即被處理，最後輸出到稱為 bundles 的檔案中。

2、Output

output 屬性告訴 webpack 在哪裡輸出它所建立的 bundles，以及如何命名這些文件，預設值為 ./dist。基本上,整個應用程式結構，都會被編譯到指定的輸出路徑的資料夾。

3、Module

模組，在 Webpack 裡一切皆模組，一個模組對應著一個檔案。 Webpack 會從設定的 Entry 開始遞歸找出所有依賴的模組。

4、Chunk

程式碼區塊，一個 Chunk 由多個模組組合而成，用於程式碼合併與分割。

5、Loader

loader 讓 webpack 能夠去處理那些非 JavaScript 檔案（webpack 本身只理解 JavaScript）。

loader 可以將所有類型的檔案轉換為 webpack 能夠處理的有效模組，然後就可以利用 webpack 的打包能力，對它們進行處理。

本質上，webpack loader 將所有類型的文件，轉換為應用程式的依賴圖（和最終的 bundle）可以直接引用的模組。

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