webpack 编译结果

a.js

console.log("module a");
module.exports = "a";

index.js

console.log("index module");
var a = require("./a");
console.log(a);

my-main.js

// 模拟 webpack 的编译结果

// 合并两个模块
// ./src/a.js
// ./src/index.js

// 这是一个立即执行函数，将需要执行的模块以参数的形式传递进来
(function (modules) {
    // 用于缓存模块导出的结果
    var moduleExports = {};

    // __webpack_require__ 避免 require 和 node 环境下的 require 重名
    function __webpack_require__(moduleId) {
        if (moduleExports[moduleId]) {
            // 检查是否有缓存
            return moduleExports[moduleId];
        }

        //得到该模块对应的函数
        var func = modules[moduleId];
        var module = {
            exports: {}
        }
        // 运行模块
        func(module, module.exports, __webpack_require__);
        // 得到模块导出的结果
        var result = module.exports;

        // 缓存模块
        moduleExports[moduleId] = result;
        
        // 把导出结果返回
        return result
    }

    // 执行入口模块
    // require 函数相当于运行一个模块，得到模块的导出结果
    return __webpack_require__("./src/index.js");
})({
    "./src/a.js": function (module, exports) {
        // 用 eval 是因为当代码出错的时候可以快速定位文件出错的位置
        eval("console.log(\"module a\")\nmodule.exports = \"a\";\n //# sourceURL=webpack:///./src/a.js")
    },
    "./src/index.js": function (module, exports, __webpack_require__) {
        eval("console.log(\"index module\")\nvar a = __webpack_require__(\"./src/a.js\")\nconsole.log(a)\n //# sourceURL=webpack:///./src/index.js")
    }
})