您好,登錄后才能下訂單哦!
本篇文章為大家展示了如何進(jìn)行webpack中bundle.js運(yùn)行單步調(diào)試的原理解析,內(nèi)容簡明扼要并且容易理解,絕對(duì)能使你眼前一亮,通過這篇文章的詳細(xì)介紹希望你能有所收獲。
我這里可以在回顧一下這個(gè)web pack的hello world項(xiàng)目。
用webpack打包之后,項(xiàng)目文件夾里包含了這些資源:
index.html的源代碼很簡單,就包含了一個(gè)webpack打包后生成的bundle.js文件:
那么運(yùn)行時(shí),Hello,Jerry的字符串是如何通過bundle.js打印出來的呢?
這就是本文要闡述的內(nèi)容。我們可以從bundle.js第一行設(shè)置斷點(diǎn),然后開始調(diào)試:
把我們web工程里定義的兩個(gè)module注入到webpack_require.m里:
因?yàn)槲覀冊(cè)趙ebpack.config.js里定義的入口模塊為main.js:
在bundle.js里此處進(jìn)行運(yùn)行時(shí)加載:return webpack_require(webpack_require.s = "./main.js");
webpack_require函數(shù)本來就是在bundle.js里定義的:
首先檢查main.js是否已經(jīng)裝載在內(nèi)存里了:
對(duì)于我這個(gè)例子,顯然沒有,所以從頭開始裝載main.js.首先創(chuàng)建一個(gè)對(duì)象,id為./main.js:
然后執(zhí)行這個(gè)module的函數(shù),即我們實(shí)現(xiàn)在main.js里的javascript代碼。當(dāng)然經(jīng)過webpack的加工,main.js里的代碼已經(jīng)通過eval的方式嵌入到bundle.js里了。
原始的main.js代碼:
上述代碼被webpack轉(zhuǎn)換之后,main.js里的源代碼被替換成了webpack_require:
從這里也能看出webpack遞歸處理module的思路,從webpack.config.js定義的entry module,即main.js出發(fā),在main.js遇到需要require其他mobule的地方,遞歸進(jìn)入webpack_require:
require("print.js")的執(zhí)行過程,就是把print.js里定義的print函數(shù)本身,賦給module的exports屬性:
print.js module裝載完畢之后,就可以執(zhí)行了。
注意第2行代碼執(zhí)行完畢后,html頁面就出現(xiàn)了期望的字符:
上述內(nèi)容就是如何進(jìn)行webpack中bundle.js運(yùn)行單步調(diào)試的原理解析,你們學(xué)到知識(shí)或技能了嗎?如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。