讀這篇文章的朋友，請確保對webpack有最基礎的認識。

您可以閱讀我前一篇文章：Webpack 10分鐘入門 來在本地運行一個Webpack的hello world項目。www.toutiao.com/i6612879647…

我這里可以在回顧一下這個web pack的hello world項目。

用webpack打包之后，項目文件夾里包含了這些資源：

index.html的源代碼很簡單，就包含了一個webpack打包后生成的bundle.js文件：

那么運行時，Hello，Jerry的字符串是如何通過bundle.js打印出來的呢？

這就是本文要闡述的內容。我們可以從bundle.js第一行設置斷點，然后開始調試：

把我們web工程里定義的兩個module注入到__webpack_require__.m里：

因為我們在webpack.config.js里定義的入口模塊為main.js:

在bundle.js里此處進行運行時加載：return webpack_require(webpack_require.s = "./main.js");

__webpack_require__函數本來就是在bundle.js里定義的：

首先檢查main.js是否已經裝載在內存里了：

對于我這個例子，顯然沒有，所以從頭開始裝載main.js.首先創建一個對象，id為./main.js:

然后執行這個module的函數，即我們實現在main.js里的javascript代碼。當然經過webpack的加工，main.js里的代碼已經通過eval的方式嵌入到bundle.js里了。

原始的main.js代碼：

上述代碼被webpack轉換之后，main.js里的源代碼被替換成了__webpack_require__:

從這里也能看出webpack遞歸處理module的思路，從webpack.config.js定義的entry module，即main.js出發，在main.js遇到需要require其他mobule的地方，遞歸進入__webpack_require__:

require("print.js")的執行過程，就是把print.js里定義的print函數本身，賦給module的exports屬性：

print.js module裝載完畢之后，就可以執行了。

注意第2行代碼執行完畢后，html頁面就出現了期望的字符：

要獲取更多Jerry的原創文章，請關注公眾號"汪子熙":

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的webpack最简单的入门教程里bundle.js之运行单步调试的原理解析的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。