webpack 02

使用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.....);