webpack编译

webpack

webpack 编译结果

1. 编译结果里 webpack 实现了一套自己的模块化规范,通过把源码中的一个个文件，映射为 key+function 的形式存储到webpack_modules中，同时会把源代码里所有的导入导出替换为 webpack_require 以及 exports。加载的时候就是执行对应 key 的函数。

2. webpack_require函数:

   • 接收一个模块 id,模块 id 是一个文件的行对路径,函数内部会做缓存
   • 缓存里存在对应模块 id 的 exports 对象则直接返回 exports 对象
   • 如果没有则定义一个 exports 对象,然后通过webpack_require函数加载模块

3. __unused_webpack_module

   • 就是一个对象 做了 get 数据劫持

     {
       exports: {
        count:(count) => {... }
        default:(...)
       }
     }

4. webpack_exports：

• 就是那个 exports 对象

(() => {
  "use strict";
  /**
   * 这就是把源码给你运行一遍
   ** __unused_webpack_module->就是后面定义的exports对象
   ** __webpack_exports__->也是后面定义的exports对象
   ** __webpack_require__->就是内部实现的模块化导入函数
   */
  var __webpack_modules__ = {
    "./src/count.js": (
      __unused_webpack_module,
      __webpack_exports__,
      __webpack_require__
    ) => {
      console.log(__webpack_exports__);
      eval(
        "__webpack_require__.r(__webpack_exports__);\n __webpack_require__.d(__webpack_exports__, {\n   count: () => ( count),\n \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n});\nconst count = (count) => {\r\n  return ++count\r\n}\r\nconst key='1231231'\r\n\r\nconst __WEBPACK_DEFAULT_EXPORT__ = (key);\n\n//# sourceURL=webpack://webpack/./src/count.js?"
      );
    },
    "./src/main.js": (
      __unused_webpack_module,
      __webpack_exports__,
      __webpack_require__
    ) => {
      eval(
        '__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _count__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./count */ "./src/count.js");\n\r\n\r\nconst log=()=>{\r\n  console.log((0,_count__WEBPACK_IMPORTED_MODULE_0__.count)());\r\n  console.log(_count__WEBPACK_IMPORTED_MODULE_0__["default"]);\r\n  const div=document.createElement(\'div\');\r\n  div.innerText=(0,_count__WEBPACK_IMPORTED_MODULE_0__.count)();\r\n}\r\nlog()\n\n//# sourceURL=webpack://webpack/./src/main.js?'
      );
    },
  };
  // 缓存
  var __webpack_module_cache__ = {};

  // 内部实现的模块化导入函数
  function __webpack_require__(moduleId) {
    console.log(moduleId);
    // 有缓存直接读并且返回
    var cachedModule = __webpack_module_cache__[moduleId];
    if (cachedModule !== undefined) {
      return cachedModule.exports;
    }
    // 创建一个新的模块并放入缓存
    var module = (__webpack_module_cache__[moduleId] = {
      exports: {},
    });

    // 设置缓存
    __webpack_modules__[moduleId](module, module.exports, __webpack_require__);

    return module.exports;
  }
  (() => {
    // 定义getter函数
    __webpack_require__.d = (exports, definition) => {
      for (var key in definition) {
        if (
          __webpack_require__.o(definition, key) &&
          !__webpack_require__.o(exports, key)
        ) {
          // 定义属性
          Object.defineProperty(exports, key, {
            enumerable: true,
            get: definition[key],
          });
        }
      }
    };
  })();

  /* 判断属性是否存在于此对象上 */
  (() => {
    __webpack_require__.o = (obj, prop) =>
      Object.prototype.hasOwnProperty.call(obj, prop);
  })();

  (() => {
    //toStringTag-> 修改对象原型的toString返回结果
    //这也是在保证兼容性,在不支持esm的环境也能运行
    __webpack_require__.r = (exports) => {
      if (typeof Symbol !== "undefined" && Symbol.toStringTag) {
        Object.defineProperty(exports, Symbol.toStringTag, {
          value: "Module",
        });
      }
      Object.defineProperty(exports, "__esModule", { value: true });
    };
  })();
  var __webpack_exports__ = __webpack_require__("./src/main.js");
})();