讀這篇文章的朋友，請確保對webpack有最基礎的認識。
您可以閱讀我前一篇文章：Webpack 10分鐘入門 來在本地運行一個Webpack的hello world項目。
我這裡可以在回顧一下這個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頁面就出現了期望的字符：
閱讀更多 汪子熙SAP 的文章
關鍵字: 源代碼 JavaScript 盤點
