1️⃣ 分析编译结果使用两个 a.js 模块和 index.js 模块

分析编译结果使用 CommonJS 模块化语法

a.js 模块

index.js 模块

1️⃣ 模拟 webpack 编译结果代码

// 合并两个模块
// - ./src/a.js
// - ./src/index.js
(function (modules) {
  var moduleExport = {}; // 用户缓存模块到导出结果
  function __webpack_require(moduleId) { // moduleId 就是模块路径
    if (moduleExport[moduleId]) {
      // 检查是否有缓存
      return moduleExport[moduleId]
    }
    var fun = modules[moduleId];
    var module = {
      export: {}
    };
    fun(module, module.exports, __webpack_require); // 运行模块
    var result = module.exports; // 得到模块的导出结果
    moduleExport[moduleId] = result;
    return result;
  };
  // 执行入口模块
  __webpack_require('./src/index.js') // require 函数相当于是运行一个模块, 的到模块导出的结果
})({
  // 该对象保存了所有的模块, 以及模块对应的代码
  "./src/a.js": function (module, exports) {
    module.exports = function () {
      console.log('模块-A');
    }
    // webpack 的编译是放在 eval 中的
    // eval("module.exports = function () {\r\n  console.log('模块-A');\r\n}\n\n//# sourceURL=webpack:///./src/a.js?");
  },
  "./src/index.js": function (module, exports, __webpack_require) {
    var a = __webpack_require("./src/a.js")
    console.log(a());
    console.log('模块-Index');
    // webpack 的编译是放在 eval 中的
    // eval("var a = __webpack_require__(/*! ./a */ \"./src/a.js\");\r\nconsole.log(a());\r\nconsole.log('模块-Index');\r\n\n\n//# sourceURL=webpack:///./src/index.js?");
  }
})

1️⃣ webpack 编译结果代码

以下代码已经删减一些兼容其他模块化语法的代码

(function (modules) {
  var installedModules = {};
  function __webpack_require__(moduleId) {
    if (installedModules[moduleId]) {
      return installedModules[moduleId].exports;
    }
    var module = installedModules[moduleId] = {
      i: moduleId,
      l: false,
      exports: {}
    };
    modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
    module.l = true;
    return module.exports;
  }
  return __webpack_require__(__webpack_require__.s = "./src/index.js");
})({
  "./src/a.js": (function (module, exports) {
    eval("module.exports = function () {\r\n  console.log('模块-A');\r\n}\n\n//# sourceURL=webpack:///./src/a.js?");
  }),
  "./src/index.js": (function (module, exports, __webpack_require__) {
    eval("var a = __webpack_require__(/*! ./a */ \"./src/a.js\")\r\nconsole.log(a());\r\nconsole.log('模块-Index');\r\n\n\n//# sourceURL=webpack:///./src/index.js?");
  })
});