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

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

我這裏可以在回顧一下這個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的原創文章，請關註公眾號"汪子熙":

webpack最簡單的入門教程裏bundle.js之運行單步調試的原理解析