淺談 Webpack 背后的運(yùn)行機(jī)制

作者：Alan 2019-08-15 10:17:16

在平時開發(fā)中我們經(jīng)常會用到 Webpack這個時下最流行的前端打包工具。它打包開發(fā)代碼，輸出能在各種瀏覽器運(yùn)行的代碼，提升了開發(fā)至發(fā)布過程的效率。

在平時開發(fā)中我們經(jīng)常會用到 Webpack這個時下流行的前端打包工具。它打包開發(fā)代碼，輸出能在各種瀏覽器運(yùn)行的代碼，提升了開發(fā)至發(fā)布過程的效率。

我們知道一份 Webpack配置文件主要包含入口( entry)、輸出文件( output)、模式、加載器( Loader)、插件( Plugin)等幾個部分。但如果只需要組織 JS 文件的話，指定入口和輸出文件路徑即可完成一個迷你項目的打包。下面我們來通過一個簡單的項目來看一下 Webpack是怎樣運(yùn)行的。

[[273840]]

同步加載

本文使用 webpack ^4.30.0 作示例.為了更好地觀察產(chǎn)出的文件，我們將模式設(shè)置為 development 關(guān)閉代碼壓縮，再開啟 source-map 支持原始源代碼調(diào)試。除此之外。我們還簡單的寫了一個插件 MyPlugin來去除源碼中的注釋。

新建 src/index.js

console.log( Hello webpack! );

新建 webpack配置文件 webpack.config.js

const path = require( path ); 
const MyPlugin = require( ./src/MyPlugin.js ) 
 
module.exports = { 
mode: development , 
devtool: source-map , 
entry: ./src/index.js , 
output: { 
path: path.resolve(__dirname, dist ) 
}, 
plugins:[ 
new MyPlugin() 
] 
};

新建 src/MyPlugin.js。

class MyPlugin { 
constructor(options) { 
this.options = options 
this.externalModules = {} 
} 
apply(compiler) { 
var reg = /("([^\"]*(\.)?)*")|( ([^\ ]*(\.)?)* )|(/{2,}.*?( 
| 
))|(/*( 
|.)*?*/)|(/******/)/g 
compiler.hooks.emit.tap( CodeBeautify , (compilation)=> { 
Object.keys(compilation.assets).forEach((data)=> { 
let content = compilation.assets[data].source() // 欲處理的文本 
content = content.replace(reg, function (word) { // 去除注釋后的文本 
return /^/{2,}/.test(word) || /^/*!/.test(word) || /^/*{3,}//.test(word) ? "" : word; 
}); 
compilation.assets[data] = { 
source(){ 
return content 
}, 
size(){ 
return content.length 
} 
} 
}) 
}) 
} 
} 
module.exports = MyPlugin

現(xiàn)在我們運(yùn)行命令 webpack --config webpack.config.js ，打包完成后會多出一個輸出目錄 dist： dist/main.js。 main 是 webpack 默認(rèn)設(shè)置的輸出文件名，我們快速瞄一眼這個文件：

(function(modules){ 
// ... 
})({ 
"./src/index.js": (function(){ 
// ... 
}) 
});

整個文件只含一個立即執(zhí)行函數(shù) (IIFE)，我們稱它為 webpackBootstrap，它僅接收一個對象 —— 未加載的模塊集合( modules)，這個 modules 對象的 key 是一個路徑， value 是一個函數(shù)。你也許會問，這里的模塊是什么?它們又是如何加載的呢?

在細(xì)看產(chǎn)出代碼前，我們先豐富一下源代碼：

新文件 src/utils/math.js：

export const plus = (a, b) => {  
return a + b;  
};

修改 src/index.js：

import { plus } from ./utils/math.js ; 
console.log( Hello webpack! ); 
 
console.log( 1 + 2: , plus(1, 2));

我們按照 ES 規(guī)范的模塊化語法寫了一個簡單的模塊 src/utils/math.js，給 src/index.js 引用。Webpack 用自己的方式支持了 ES6 Module 規(guī)范，前面提到的 module 就是和 ES6 module 對應(yīng)的概念。

接下來我們看一下這些模塊是如何通 ES5 代碼實(shí)現(xiàn)的。再次運(yùn)行命令 webpack --config webpack.config.js后查看輸出文件：

(function(modules){ 
// ... 
})({ 
"./src/index.js": (function(){ 
// ... 
}), 
"./src/utils/math.js": (function() { 
// ... 
}) 
});

IIFE 傳入的 modules 對象里多了一個鍵值對，對應(yīng)著新模塊 src/utils/math.js，這和我們在源代碼中拆分的模塊互相呼應(yīng)。然而，有了 modules 只是第一步，這份文件最終達(dá)到的效果應(yīng)該是讓各個模塊按開發(fā)者編排的順序運(yùn)行。

探究 webpackBootstrap

接下來看看 webpackBootstrap 函數(shù)中有些什么：

// webpackBootstrap 
(function(modules){ 
// 緩存 __webpack_require__ 函數(shù)加載過的模塊 
var installedModules = {}; 
/** 
* Webpack 加載函數(shù)，用來加載 webpack 定義的模塊 
* @param {String} moduleId 模塊 ID，一般為模塊的源碼路徑，如 "./src/index.js" 
* @returns {Object} exports 導(dǎo)出對象 
*/ 
function __webpack_require__(moduleId) { 
// ... 
} 
// 在 __webpack_require__ 函數(shù)對象上掛載一些變量及函數(shù) ... 
// 傳入表達(dá)式的值為 "./src/index.js" 
return __webpack_require__(__webpack_require__.s = "./src/index.js"); 
})(/* modules */);

可以看到其實(shí)主要做了兩件事：

定義一個模塊加載函數(shù) __webpack_require__。
使用加載函數(shù)加載入口模塊 "./src/index.js"。

整個 webpackBootstrap 中只出現(xiàn)了入口模塊的影子，那其他模塊又是如何加載的呢?我們順著 __webpack_require__("./src/index.js") 細(xì)看加載函數(shù)的內(nèi)部邏輯：

function __webpack_require__(moduleId) { 
// 重復(fù)加載則利用緩存 
if (installedModules[moduleId]) { 
return installedModules[moduleId].exports; 
} 
// 如果是第一次加載，則初始化模塊對象，并緩存 
var module = installedModules[moduleId] = { 
i: moduleId, // 模塊 ID 
l: false, // 模塊加載標(biāo)識 
exports: {} // 模塊導(dǎo)出對象 
}; 
/** 
* 執(zhí)行模塊 
* @param module.exports -- 模塊導(dǎo)出對象引用，改變模塊包裹函數(shù)內(nèi)部的 this 指向 
* @param module -- 當(dāng)前模塊對象引用 
* @param module.exports -- 模塊導(dǎo)出對象引用 
* @param __webpack_require__ -- 用于在模塊中加載其他模塊 
*/ 
modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 
// 模塊加載標(biāo)識置為已加載 
module.l = true; 
// 返回當(dāng)前模塊的導(dǎo)出對象引用 
return module.exports; 
}

首先，加載函數(shù)使用了閉包變量 installedModules，用來將已加載過的模塊保存在內(nèi)存中。接著是初始化模塊對象，并把它掛載到緩存里。然后是模塊的執(zhí)行過程，加載入口文件時 modules[moduleId] 其實(shí)就是 ./src/index.js 對應(yīng)的模塊函數(shù)。執(zhí)行模塊函數(shù)前傳入了跟模塊相關(guān)的幾個實(shí)參，讓模塊可以導(dǎo)出內(nèi)容，以及加載其他模塊的導(dǎo)出。最后標(biāo)識該模塊加載完成，返回模塊的導(dǎo)出內(nèi)容。

根據(jù) __webpack_require__ 的緩存和導(dǎo)出邏輯，我們得知在整個 IIFE 運(yùn)行過程中，加載已緩存的模塊時，都會直接返回 installedModules[moduleId].exports，換句話說，相同的模塊只有在第一次引用的時候才會執(zhí)行模塊本身。

模塊執(zhí)行函數(shù)

__webpack_require__ 中通過 modules[moduleId].call() 運(yùn)行了模塊執(zhí)行函數(shù)，下面我們就進(jìn)入到 webpackBootstrap 的參數(shù)部分，看看模塊的執(zhí)行函數(shù)。

/*** 入口模塊 ./src/index.js ***/ 
"./src/index.js": (function (module, __webpack_exports__, __webpack_require__) { 
"use strict"; 
// 用于區(qū)分 ES 模塊和其他模塊規(guī)范，不影響理解 demo，戰(zhàn)略跳過。 
__webpack_require__.r(__webpack_exports__); 
/* harmony import */ 
// 源模塊代碼中，`import {plus} from ./utils/math.js ;` 語句被 loader 解析轉(zhuǎn)化。 
// 加載 "./src/utils/math.js" 模塊， 
var _utils_math_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./src/utils/math.js"); 
console.log( Hello webpack! ); 
console.log( 1 + 2: , Object(_utils_math_js__WEBPACK_IMPORTED_MODULE_0__["plus"])(1, 2)); 
}), 
 
 
"./src/utils/math.js": (function (module, __webpack_exports__, __webpack_require__) { 
"use strict"; 
__webpack_require__.r(__webpack_exports__); 
/* harmony export (binding) */ 
// 源模塊代碼中，`export` 語句被 loader 解析轉(zhuǎn)化。 
__webpack_require__.d(__webpack_exports__, "plus", function () { 
return plus; 
}); 
const plus = (a, b) => { 
return a + b; 
}; 
})

執(zhí)行順序是：入口模塊 -> 工具模塊 -> 入口模塊。入口模塊中首先就通過 __webpack_require__("./src/utils/math.js") 拿到了工具模塊的 exports 對象。再看工具模塊， ES 導(dǎo)出語法轉(zhuǎn)化成了 __webpack_require__.d(__webpack_exports__, [key], [getter])，而 __webpack_require__.d 函數(shù)的定義在 webpackBootstrap 內(nèi)：

// 定義 exports 對象導(dǎo)出的屬性。 
__webpack_require__.d = function (exports, name, getter) { 
// 如果 exports （不含原型鏈上）沒有 [name] 屬性，定義該屬性的 getter。 
if (!__webpack_require__.o(exports, name)) { 
Object.defineProperty(exports, name, { 
enumerable: true, 
get: getter 
}); 
} 
}; 
// 包裝 Object.prototype.hasOwnProperty 函數(shù)。 
__webpack_require__.o = function (object, property) { 
return Object.prototype.hasOwnProperty.call(object, property); 
};

可見 __webpack_require__.d 其實(shí)就是 Object.defineProperty 的簡單包裝。

引用工具模塊導(dǎo)出的變量后，入口模塊再執(zhí)行它剩余的部分。至此，Webpack 基本的模塊執(zhí)行過程就結(jié)束了。

好了，我們用流程圖總結(jié)一下 Webpack 模塊的加載思路：

異步加載

有上面的打包我們發(fā)現(xiàn)將不同的打包進(jìn)一個 main.js 文件。 main.js 會集中消耗太多網(wǎng)絡(luò)資源，導(dǎo)致用戶需要等待很久才可以開始與網(wǎng)頁交互。

一般的解決方式是：根據(jù)需求降低首次加載文件的體積，在需要時(如切換前端路由器，交互事件回調(diào))異步加載其他文件并使用其中的模塊。

Webpack 推薦用 ES import() 規(guī)范來異步加載模塊，我們根據(jù) ES 規(guī)范修改一下入口模塊的 import 方式，讓其能夠異步加載模塊：

src/index.js 
 
console.log( Hello webpack! );window.setTimeout(() => {  import( ./utils/math ).then(mathUtil => {  console.log( 1 + 2:   + mathUtil.plus(1, 2));  });}, 2000);

工具模塊 (src/utils/math.js)依然不變，在 webpack 配置里，我們指定一下資源文件的公共資源路徑 (publicPath)，后面的探索過程中會遇到。

const path = require( path ); 
const MyPlugin = require( ./src/MyPlugin.js ) 
 
 
module.exports = { 
mode: development , 
devtool: source-map , 
entry: ./src/index.js , 
output: { 
path: path.resolve(__dirname, dist ), 
publicPath: /dist/ 
}, 
plugins:[ 
new MyPlugin() 
] 
};

接著執(zhí)行一下打包，可以看到除了 dist/main.js 外，又多了一個 dist/0.js ./src/utils/math.js。模塊從 main chunk 遷移到了 0 chunk 中。而與 demo1 不同的是， main chunk 中添加了一些用于異步加載的代碼，我們概覽一下：

// webpackBootstrap 
(function (modules) { 
// 加載其他 chunk 后的回調(diào)函數(shù) 
function webpackJsonpCallback(data) { 
// ... 
} 
// ... 
// 用于緩存 chunk 的加載狀態(tài)，0 為已加載 
var installedChunks = { 
"main": 0 
}; 
// 拼接 chunk 的請求地址 
function jsonpScriptSrc(chunkId) { 
// ... 
} 
// 同步 require 函數(shù)，內(nèi)容不變 
function __webpack_require__(moduleId) { 
// ... 
} 
// 異步加載 chunk，返回封裝加載過程的 promise 
__webpack_require__.e = function requireEnsure(chunkId) { 
// ... 
} 
// ... 
// defineProperty 的包裝，內(nèi)容不變 
__webpack_require__.d = function (exports, name, getter) {} 
// ... 
// 根據(jù)配置文件確定的 publicPath 
__webpack_require__.p = "/dist/"; 
/**** JSONP 初始化 ****/ 
var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || []; 
var oldJsonpFunction = jsonpArray.push.bind(jsonpArray); 
jsonpArray.push = webpackJsonpCallback; 
jsonpArray = jsonpArray.slice(); 
for (var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]); 
var parentJsonpFunction = oldJsonpFunction; 
/**** JSONP 初始化 ****/ 
return __webpack_require__(__webpack_require__.s = "./src/index.js"); 
})({ 
"./src/index.js": (function(module, exports, __webpack_require__) { 
document.write( Hello webpack! ); 
window.setTimeout(() => { 
__webpack_require__.e(/*! import() */ 0).then(__webpack_require__.bind(null, /*! ./utils/math */ "./src/utils/math.js")).then(mathUtil => { 
console.log( 1 + 2: + mathUtil.plus(1, 2)); 
}); 
}, 2000); 
}) 
})

可以看到 webpackBootstrap 的函數(shù)體部分增加了一些內(nèi)容，參數(shù)部分移除了 "./src/utils/math.js" 模塊。跟著包裹函數(shù)的執(zhí)行順序，我們先聚焦到「JSONP 初始化」部分：

// 存儲 jsonp 的數(shù)組，首次運(yùn)行為 [] 
var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || []; 
// 保存 jsonpArray 的 push 函數(shù)，首次運(yùn)行為 Array.prototype.push 
var oldJsonpFunction = jsonpArray.push.bind(jsonpArray); 
// 將 jsonpArray 的 push 重寫為 webpackJsonpCallback （加載其他 chunk 后的回調(diào)函數(shù)） 
jsonpArray.push = webpackJsonpCallback; 
// 將 jsonpArray 重置為正常數(shù)組，push 重置為 Array.prototype.push 
jsonpArray = jsonpArray.slice(); 
// 由于 jsonpArray 為 []，不做任何事 
for (var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]); 
// Array.prototype.push 
var parentJsonpFunction = oldJsonpFunction;

初始化結(jié)束后，變化就是 window 上掛載了一個 webpackJsonp 數(shù)組，它的值為 [];此外，這個數(shù)組的 push 被改寫為 webpackJsonpCallback 函數(shù)，我們在后面會提到這些準(zhǔn)備工作的作用。

接著是 __webpack_require__ 入口模塊，由于 __webpack_require__ 函數(shù)沒有改變，我們繼續(xù)觀察入口模塊執(zhí)行函數(shù)有了什么變化。

顯然， import( ../utils/math.js ) 被轉(zhuǎn)化為 __webpack_require__.e(0).then(__webpack_require__.bind(null,"./src/utils/math.js"))。0 是 ./src/utils/math.js 所在 chunk 的 id，「同步加載模塊」的邏輯拆分成了「先加載 chunk，完成后再加載模塊」。

我們翻到 __webpack_require__.e 的定義位置：

__webpack_require__.e = function requireEnsure(chunkId) { 
var promises = []; 
// installedChunks 是在 webpackBootstrap 中維護(hù)的 chunk 緩存 
var installedChunkData = installedChunks[chunkId]; 
// chunk 未加載 
if(installedChunkData !== 0) { 
// installedChunkData 為 promise 表示 chunk 加載中 
if(installedChunkData) { 
promises.push(installedChunkData[2]); 
} else { 
/*** 首次加載 chunk: ***/ 
// 初始化 promise 對象 
var promise = new Promise(function(resolve, reject) { 
installedChunkData = installedChunks[chunkId] = [resolve, reject]; 
}); 
promises.push(installedChunkData[2] = promise); 
// 創(chuàng)建 script 標(biāo)簽加載 chunk 
var head = document.getElementsByTagName( head )[0]; 
var script = document.createElement( script ); 
var onScriptComplete; 
// ... 省略一些 script 屬性設(shè)置 
// src 根據(jù) publicPath 和 chunkId 拼接 
script.src = jsonpScriptSrc(chunkId); 
// 加載結(jié)束回調(diào)函數(shù)，處理 script 加載完成、加載超時、加載失敗的情況 
onScriptComplete = function (event) { 
script.onerror = script.onload = null; // 避免 IE 內(nèi)存泄漏問題 
clearTimeout(timeout); 
var chunk = installedChunks[chunkId]; 
// 處理 script 加載完成，但 chunk 沒有加載完成的情況 
if(chunk !== 0) { 
// chunk 加載中 
if(chunk) { 
var errorType = event && (event.type === load ? missing : event.type); 
var realSrc = event && event.target && event.target.src; 
var error = new Error( Loading chunk + chunkId + failed. 
( + errorType + : + realSrc + ) ); 
error.type = errorType; 
error.request = realSrc; 
// reject(error) 
chunk[1](error); 
} 
// 統(tǒng)一將沒有加載的 chunk 標(biāo)記為未加載 
installedChunks[chunkId] = undefined; 
} 
}; 
// 設(shè)置 12 秒超時時間 
var timeout = setTimeout(function(){ 
onScriptComplete({ type: timeout , target: script }); 
}, 120000); 
script.onerror = script.onload = onScriptComplete; 
head.appendChild(script); 
/*** 首次加載 chunk ***/ 
} 
} 
return Promise.all(promises); 
};

看起來有點(diǎn)長，我們一步步剖析，先從第一行和最后一行來看，整個函數(shù)將異步加載的過程封裝到了 promise 中，最終導(dǎo)出。

接著從第二行開始， installedChunkData 從緩存中取值，顯然首次加載 chunk 時此處是 undefined。接下來， installedChunkData 的 undefined 值觸發(fā)了第一層 if 語句的判斷條件。緊接著進(jìn)行到第二層 if 語句，此時根據(jù)判斷條件走入 else 塊，這里 if 塊里的內(nèi)容我們先戰(zhàn)略跳過，else 里主要有兩塊內(nèi)容，一是 chunk 腳本加載過程，這個過程創(chuàng)建了一個 script 標(biāo)簽，使其請求 chunk所在地址并執(zhí)行 chunk 內(nèi)容;二是初始化 promise ，并用 promise 控制 chunk 文件加載過程。

不過，我們只在這段 else 代碼塊中找到了 reject 的使用處，也就是在 chunk 加載異常時 chunk[1](error) 的地方，但并沒發(fā)現(xiàn)更重要的 resolve 的使用地點(diǎn)，僅僅是把 resolve 掛在了緩存上 (installedChunks[chunkId] = [resolve, reject])。

這里的 chunk 文件加載下來會發(fā)生什么呢?讓我們打開 dist/0.js 一探究竟：

(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[0], { 
"./src/utils/math.js": 
(function (module, __webpack_exports__, __webpack_require__) { 
 
 
"use strict"; 
__webpack_require__.r(__webpack_exports__); 
/* harmony export (binding) */ 
__webpack_require__.d(__webpack_exports__, "plus", function () { 
return plus; 
}); 
const plus = (a, b) => { 
return a + b; 
}; 
}) 
}]);

我們發(fā)現(xiàn)了：

久違的 ./src/utils/math.js 模塊
window["webpackJsonp"] 數(shù)組的使用地點(diǎn)

這段代碼開始執(zhí)行，把異步加載相關(guān)的 chunk id 與模塊傳給 push 函數(shù)。而前面已經(jīng)提到過， window["webpackJsonp"] 數(shù)組的 push 函數(shù)已被重寫為 webpackJsonpCallback 函數(shù)，它的定義位置在 webpackBootstrap 中：

function webpackJsonpCallback(data) { 
var chunkIds = data[0]; 
var moreModules = data[1]; 
// then flag all "chunkIds" as loaded and fire callback 
var moduleId, chunkId, i = 0, resolves = []; 
// 將 chunk 標(biāo)記為已加載 
for(;i < chunkIds.length; i++) { 
chunkId = chunkIds[i]; 
if(installedChunks[chunkId]) { 
resolves.push(installedChunks[chunkId][0]); 
} 
installedChunks[chunkId] = 0; 
} 
// 把 "moreModules" 加到 webpackBootstrap 中的 modules 閉包變量中。 
for(moduleId in moreModules) { 
if(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) { 
modules[moduleId] = moreModules[moduleId]; 
} 
} 
// parentJsonpFunction 是 window["webpackJsonp"] 的原生 push 
// 將 data 加入全局?jǐn)?shù)組，緩存 chunk 內(nèi)容 
if(parentJsonpFunction) parentJsonpFunction(data); 
// 執(zhí)行 resolve 后，加載 chunk 的 promise 狀態(tài)變?yōu)?nbsp;resolved，then 內(nèi)的函數(shù)開始執(zhí)行。 
while(resolves.length) { 
resolves.shift()(); 
} 
};

走進(jìn)這個函數(shù)中，意味著異步加載的 chunk 內(nèi)容已經(jīng)拿到，這個時候我們要完成兩件事，一是讓依賴這次異步加載結(jié)果的模塊繼續(xù)執(zhí)行，二是緩存加載結(jié)果。

關(guān)于第一點(diǎn)，我們回憶一下之前 __webpack_require__.e 的內(nèi)容，此時 chunk 還處于「加載中」的狀態(tài)，也就是說對應(yīng)的 installedChunks[chunkId] 的值此時為 [resolve, reject, promise]。而這里，chunk 已經(jīng)加載，但 promise 還未決議，于是 webpackJsonpCallback 內(nèi)部定義了一個 resolves 變量用來收集 installedChunks 上的 resolve 并執(zhí)行它。

接下來說到第二點(diǎn)，就要涉及幾個層面的緩存了。

首先是 chunk 層面，這里有兩個相關(guān)操作，操作一將 installedChunks[chunkId] 置為 0 可以讓 __webpack_require__.e 在第二次加載同一 chunk 時返回一個立即決議的 promise(Promise.all([]));操作二將 chunk data 添加進(jìn) window["webpackJsonp"] 數(shù)組，可以在多入口模式時，方便地拿到已加載過的 chunk 緩存。通過以下代碼實(shí)現(xiàn)：

/*** 緩存執(zhí)行部分 ***/ 
var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || []; 
// ... 
for (var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]); 
var parentJsonpFunction = oldJsonpFunction; 
/*** 緩存執(zhí)行部分 ***/ 
/*** 緩存添加部分 ***/ 
function webpackJsonpCallback(data) { 
//... 
// 此處的 parentJsonpFunction 是 window["webpackJsonp"] 數(shù)組的原生 push 
if (parentJsonpFunction) parentJsonpFunction(data); 
//... 
} 
/*** 緩存添加部分 ***/

而在 modules 層面， chunk 中的 moreModules 被合入入口文件的 modules 中，可供下一個微任務(wù)中的 __webpack_require__ 同步加載模塊。

({ 
"./src/index.js": 
(function (module, exports, __webpack_require__) { 
console.log( Hello webpack! ); 
window.setTimeout(() => { 
__webpack_require__.e(0).then(__webpack_require__.bind(null, "./src/utils/math.js")).then(mathUtil => { 
console.log( 1 + 2: + mathUtil.plus(1, 2)); 
}); 
}, 2000); 
}) 
});

__webpack_require__.e(0) 返回的 promise 決議后， __webpack_require__.bind(null,"./src/utils/math.js") 可以加載到 chunk 攜帶的模塊，并返回模塊作為下一個微任務(wù)函數(shù)的入?yún)?，接下來就?Webpack Loader 翻譯過的其他業(yè)務(wù)代碼了。

現(xiàn)在讓我們把異步流程梳理一下：