浅析webpack编译结果

在学习完webpack编译后对于结果的一个浅析，下面自己简单实现一个编译结果。

总共有三个模块: a.js，b.js，以及入口模块index.js

a.js

var a = {
  name: 'ahha',
  age: 18
}
module.exports = a;`

b.js

const modeuleA = require('./a');
console.log('模块a', modeuleA);
var moduleB = {
  name: 'xiaowang',
  age: 20
}
module.exports = moduleB;

入口模块index.js

const b = require('./b');
console.log('模块b', b);
var c = {
  name: 'xiaoli',
  age: 22
}
console.log('模块c', c);

下面是自己实现的一个导出结果，详情请见注释

// 立即执行函数，调用及执行，不污染全局
(function (modules) {
   
    var moduleExports = {
   }; // 用来缓存模块的导出结果，不用下次再去得到模块缓存
    //  __webpack_require__函数相当于运行一个函数，得到模块的导出结果
    function __webpack_require__(moduleId) {
   
        if (moduleExports[moduleId]) {
     // 检查是否有缓存
            return moduleExports[moduleId]
        }
        var func = modules[moduleId]; // 拿到该模块的对应的函数
        var module = {
   
            exports: {
   }
        }
        func(module, module.exports, __webpack_require__)