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的原創文章，請關注公眾號"汪子熙":

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/24475491/viewspace-2216990/，如需轉載，請註明出處，否則將追究法律責任。