27行代码读懂webpack

我们在用webpack打包之后，会生成一个打包的文件，这个文件里到底做了什么呢？
就让我来一步步为你分解
假如我现在有一个a.js文件

// a.js
module.exports = 'aaaaaaa'; 

我还有一个b.js文件

//b.js
var a = require('./a.js')
console.log(a)

那么现在我把b.js作为入口文件，打包出来的结果就是下面的代码，注意：下面的代码是经过我简化之后，便于你理解webpack的代码，只有27行，原始代码比这个要多。

var moduleArr = [
  (function(module,exports){
    module.exports = "aaaaa"
  }),(function(module,exports,webpackRequire){
    var a = webpackRequire(0);
    console.log(a)
  })
];
(function(modules){
  var installedModules = {};
  function webpackRequire(moduleId){
    if(installedModules[moduleId]){
      return installedModules[moduleId].exports;
    }else { //为installedModules里增加一个moduleId，它指向一个对象
      var module = installedModules[moduleId] = {
        i: moduleId,
        l:false,//是否已经load的意思
        exports:{}// 这个模块到底exports出了什么东西，放到这
    }
    modules[moduleId](module,module.exports,webpackRequire)
    module.l = true //表明已经load进了installedModules对象中
    return module.exports;
    }
  }
 webpackRequire(1)
})(moduleArr)

参数

var moduleArr = [
  (function(module,exports){
    module.exports = "aaaaa"
  }),(function(module,exports,webpackRequire){ //注意这有一个webpackRequire的参数
    var a = webpackRequire(0);
    console.log(a)
  })
];

最顶部，我声明了一个数组moduleArr，这个数组里有两个匿名函数，每个匿名函数都需要module和exports，但其中一个函数还需要另外一个参数，webpackRequire，这个参数是什么呢？我们看他的函数体很明显知道这个参数是一个方法，给它传了一个参数0。而且，你不觉得函数体内的代码就是我上面那两个简单的a.js和b.js文件中的代码吗？

立即执行

然后，我们看打包出来的文件中有一个立即执行函数，这个函数需要一个modules的参数，这个参数是什么呢？在这个函数的最底部，我们把moduleArr传进去了，说明这个参数是一个数组。
然后我们看这个函数体，好多代码，怎么看？
跳过所有变量声明和函数声明字段，只看代码执行字段，哪个？就是最底部那行
webpackRequire(1)
这行代码是要执行webpackRequire函数，并给它赋予了参数1，然后我么再往回看这个函数要做什么。

webpackRequire函数做了什么

接着拆分

function webpackRequire(moduleId){
    if(installedModules[moduleId]){
      return installedModules[moduleId].exports;
    }else { //为installedModules里增加一个moduleId，它指向一个对象
      var module = installedModules[moduleId] = {
        i: moduleId,
        l:false,//是否已经load的意思
        exports:{}// 这个模块到底exports出了什么东西，放到这
    }
    modules[moduleId](module,module.exports,webpackRequire)
    module.l = true //表明已经load进了installedModules对象中
    return module.exports;
    }

这个函数需要一个moduleId的参数，然后函数体内有一个条件判断语句，
然后我们看到了installedModules，是什么？再往回看，发现它是一个空对象，那它里面肯定没有moduleId这个key，然后看else分支做了什么
啊···，现在它直接给installedModules添加属性了

installedModules[moduleId] = {
        i: moduleId,   // 1
        l:false,//我理解的是这个模块是否已经load的意思，如果错了通知我
        exports:{}// 这个模块到底exports出了什么东西，放到这
    }

添加完属性我们接着往下看
咦，modules是什么？就是传给整个立即执行函数的参数，我都快忘了，这才开始调用，早干嘛去了。
modules[1]对应的是moduleArr的第二个匿名函数，这里执行的时候,传给了它三个参数，module就是installedModules[1],module.exports是一个空对象，webpackRequire是一个参数，竟然把它自己都传进去了，这个叫递归。
然后我们执行这个匿名函数吧！

匿名函数做了什么

我们接着看第二个匿名函数

function(module,exports,webpackRequire){ //注意这有一个webpackRequire的参数
    var a = webpackRequire(0);
    console.log(a)
}

这个函数中根本就没有用到module和module.exports，只用到了webpackRequire,我们看到它又给webpackRequire赋参0，还记得我们第一次调用webpackRequire这个函数是什么时候吗？不记得就往回翻翻。
然后做了什么？再往回看 webpackRequire函数做了什么这一段，重复一遍。
重复完了吗，重复完了我们就应该进入到了另外一个匿名函数

匿名函数到底做了什么

function(module,exports){
    module.exports = "aaaaa"
}

上面那个匿名函数带我们兜了一圈，又把我们带到了另外一个匿名函数，注意，此时上面那个匿名函数还没有执行完。
然后我们看当前这个匿名函数，这个函数体内有module，有exports，那么传进来的参数,module,module.exports就可以派上用场了，具体执行完就应该是这样

installedModules[0] = {
i:0,
l:false,
exports: "aaaaa"
}

好了，匿名函数就干了这么点事，然后我们重新回到webpackRequire函数，尽未完之事。

module.l = true //表明已经load进了installedModules对象中
return module.exports; // "aaaaa"

这个return是干嘛用的，还记得我说 有一个匿名函数并没有执行完吗？

function(module,exports,webpackRequire){ //注意这有一个webpackRequire的参数
    var a = webpackRequire(0);
    console.log(a)
}

明白了吧，return就是把 “aaaaa” 赋值给了a，然后再控制台打印出a。
这就完了吗？
没呢！

module.l = true //表明已经load进了installedModules对象中
return module.exports; // 还是空对象{}

那这个return出来的空对象又是谁的结果？
还记得我问第一次调用webpackRequire函数是什么时候吗？
嘿嘿···
完