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函数是什么时候吗？
嘿嘿···
完
