webpack的打包原理

小編給大家分享一下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的打包原理”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！