使用webpack進行打包之后生成的bundle.js的內(nèi)容大致如下:
bundlejs.png
比較重要的就是這個立即執(zhí)行函數(shù),這個立即執(zhí)行函數(shù)表明了webpack是如何工作的
(function(modules) {
// 模塊緩存,用于提高查找模塊的速度
var installedModules = {};
// 用于查詢模塊的函數(shù)
function __webpack_require__(moduleId) {
// 首先檢查模塊是否存在與緩存中,如果存在,則直接返回該模塊提供的接口
//(由于緩存的大小一定小于等于modules的大小,所以查詢速度較快)
if(installedModules[moduleId])
return installedModules[moduleId].exports;
// 如果緩存中不存在該模塊,則在緩存中為該模塊分配好空間
// module和installedModules[moduleId] 指向的都是同一個"模塊對象"
var module = installedModules[moduleId] = {
// 模塊名
i: moduleId,
// 是否存在與緩存中
l: false,
// 模塊提供的接口
exports: {}
};
// 在modules中尋找指定的模塊,并將模塊"添加"到緩存中
// modules[moduleId]就是模塊提供的接口
// 使用call方法調(diào)用該接口,并且第一個參數(shù)為module.exports
// 則module.exports == installedModules[moduleId].exports == modules[moduleId]
modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
// 說明已經(jīng)將模塊添加到緩存中了
module.l = true;
// 將模塊的提供的接口返回
return module.exports;
}
.....)(xxx,xxx.....);
