bundle.js文件

  1. (() => {
  2.   "use strict";
  3.   // 模块数组
  4.   var __webpack_modules__ = {
  5.     "./src/a.js": (
  6.       __unused_webpack_module,
  7.       __webpack_exports__,
  8.       __webpack_require__
  9.     ) => {
  10.       eval(
  11.         '__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   "a": () => (/* binding */ a)\n/* harmony export */ });\nconsole.log("a文件--------");\nvar a = 20;\n\n//# sourceURL=webpack://app-1/./src/a.js?'
  12.       );
  13.     },
  15.     "./src/b.js": (
  16.       __unused_webpack_module,
  17.       __webpack_exports__,
  18.       __webpack_require__
  19.     ) => {
  20.       eval(
  21.         '__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   "b": () => (/* binding */ b)\n/* harmony export */ });\nconsole.log("b文件--------");\nvar b = 10;\n\n//# sourceURL=webpack://app-1/./src/b.js?'
  22.       );
  23.     },
  25.     "./src/index.js": (
  26.       __unused_webpack_module,
  27.       __webpack_exports__,
  28.       __webpack_require__
  29.     ) => {
  30.       eval(
  31.         '__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _a_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./a.js */ "./src/a.js");\n/* harmony import */ var _b_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./b.js */ "./src/b.js");\n\n\nconsole.log(_a_js__WEBPACK_IMPORTED_MODULE_0__.a, "a变量-------------");\nconsole.log(_b_js__WEBPACK_IMPORTED_MODULE_1__.b, "b变量-------------");\n\n//# sourceURL=webpack://app-1/./src/index.js?'
  32.       );
  33.     },
  34.   };
  35.   // 模块缓存合集
  36.   var __webpack_module_cache__ = {};
  37.   function __webpack_require__(moduleId) {
  38.     // 从模块缓存中获取moduleId模块
  39.     var cachedModule = __webpack_module_cache__[moduleId];
  40.     // 判断模块缓存对象上是否缓存过当前模块，若缓存过直接返回缓存过的模块
  41.     if (cachedModule !== undefined) {
  42.       return cachedModule.exports;
  43.     }
  44.     // 若没缓存，则创建一个导出对象挂载在缓存对象上
  45.     var module = (__webpack_module_cache__[moduleId] = {
  46.       exports: {},
  47.     });
  48.     // 从模块数组中取出模块，并把当前module、模块导出、当前执行模块函数传入进行调用
  49.     __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
  50.     // 返回当前模块导出
  51.     return module.exports;
  52.   }
  53.   // __webpack_require__.d
  54.   (() => {
  55.     __webpack_require__.d = (exports, definition) => {
  56.       for (var key in definition) {
  57.         // 判断exports上是否有key属性以及当前definition自身是否拥有key属性
  58.         if (
  59.           __webpack_require__.o(definition, key) &&
  60.           !__webpack_require__.o(exports, key)
  61.         ) {
  62.           // 若exports上无key属性及key属性definition自身属性，则向exports添加key属性
  63.           // 并设计它的getter方法从definition获取值
  64.           Object.defineProperty(exports, key, {
  65.             enumerable: true,
  66.             get: definition[key],
  67.           });
  68.         }
  69.       }
  70.     };
  71.   })();
  72.   //  __webpack_require__.o  判断对象是否有相应的属性（忽略掉那些从原型链上继承到的属性）
  73.   (() => {
  74.     __webpack_require__.o = (obj, prop) =>
  75.       Object.prototype.hasOwnProperty.call(obj, prop);
  76.   })();
  77.   //  __webpack_require__.r 用来标识当前对象为esModule模块对象
  78.   (() => {
  79.     __webpack_require__.r = (exports) => {
  80.       if (typeof Symbol !== "undefined" && Symbol.toStringTag) {
  81.         Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
  82.       }
  83.       Object.defineProperty(exports, "__esModule", { value: true });
  84.     };
  85.   })();
  87.   // 执行入口文件
  88.   var __webpack_exports__ = __webpack_require__("./src/index.js");
  89. })();

转换过后的webpack_modules

  1.   var __webpack_modules__ = {
  2.     "./src/a.js": (
  3.       __unused_webpack_module,
  4.       __webpack_exports__,
  5.       __webpack_require__
  6.     ) => {
  7.       __webpack_require__.r(__webpack_exports__);
  8.       __webpack_require__.d(__webpack_exports__, {
  9.         // 为什么是函数？用于挂载在__webpack_exports__的get上使用
  10.         a: () => a,
  11.       });
  12.       console.log("a文件--------");
  13.       var a = 20;
  14.     },
  15.     "./src/b.js": (
  16.       __unused_webpack_module,
  17.       __webpack_exports__,
  18.       __webpack_require__
  19.     ) => {
  20.       __webpack_require__.r(__webpack_exports__);
  21.       __webpack_require__.d(__webpack_exports__, {
  22.         b: () => b,
  23.       });
  24.       console.log("b文件--------");
  25.       var b = 10;
  26.     },
  27.     "./src/index.js": (
  28.       __unused_webpack_module,
  29.       __webpack_exports__,
  30.       __webpack_require__
  31.     ) => {
  32.       // 调用__webpack_require__.r标识当前属于esModule
  33.       __webpack_require__.r(__webpack_exports__);
  34.       // 调用__webpack_require__引入文件a
  35.       var _a_js__WEBPACK_IMPORTED_MODULE_0__ =
  36.         __webpack_require__("./src/a.js");
  37.       // 调用__webpack_require__引入文件b
  38.       var _b_js__WEBPACK_IMPORTED_MODULE_1__ =
  39.         __webpack_require__("./src/b.js");
  40.       console.log(_a_js__WEBPACK_IMPORTED_MODULE_0__.a, "a变量-------------");
  41.       console.log(_b_js__WEBPACK_IMPORTED_MODULE_1__.b, "b变量-------------");
  42.     },
  43.   };

执行过后的webpack_module_cache合集

image.png