使用webpack进行打包之后生成的bundle.js的内容大致如下:
bundlejs.png
比较重要的就是这个立即执行函数,这个立即执行函数表明了webpack是如何工作的
(function(modules) {
// 模块缓存,用于提高查找模块的速度
var installedModules = {};
// 用于查询模块的函数
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方法调用该接口,并且第一个参数为module.exports
// 则module.exports == installedModules[moduleId].exports == modules[moduleId]
modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
// 说明已经将模块添加到缓存中了
module.l = true;
// 将模块的提供的接口返回
return module.exports;
}
.....)(xxx,xxx.....);
