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

讀這篇文章的朋友，請確保對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的原創文章，請關注公衆號"汪子熙":