webpack 打包后文件分析

笔记

(function (modules) {
  // 01 定义对象用于将来缓存被加载过的模块
  let installedModules = {};

  // 02 定义一个 __webpack_require__ 方法来替换 import require 加载操作
  function __webpack_require__(moduleId) {
    // 判断缓存中是否存在
    if (installedModules[moduleId]) {
      return installedModules[moduleId].exports;
    }
    // 如果缓存中不存在
    let module = (installedModules[moduleId] = {
      exports: {},
      l: false,
      i: moduleId,
    });

    modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

    module.l = true;

    return module.exports;
  }

  // 03 定义 m 属性用于保存 modules
  __webpack_require__.m = modules;

  // 04 定义 c 属性用于保存 cache
  __webpack_require__.c = installedModules;

  // 05 定义 o 方法用于判断对象上是否存在指定属性
  __webpack_require__.o = function (object, property) {
    return Object.prototype.hasOwnProperty(object, property);
  };

  // 06 定义 d 方法用于在对象上添加指定的属性， 同时给该属性提供一个 getter
  __webpack_require__.d = function (object, property, getter) {
    if (!__webpack_require__.o(exports, name)) {
      Object.defineProperty(exports, name, { enumerable: true, get: getter });
    }
  };

  // 07 定义 r 方法 用于标识当前模块是es6 类型
  __webpack_require__.r = function (exports) {
    if (typeof Symbol !== "undefined" && Symbol.toStringTag) {
      Object.prototype.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
    }
    Object.prototype.defineProperty(exports, "__esModule", { value: true });
  };

  // 08 定义 t 方法，用于加载指定 value 模块的内容，进行处理再返回
  __webpack_require__.t = function (value, mode) {
    if (mode & 1) {
      value = __webpack_require__(value);
    }

    if (mode & 8) {
      // 加载了可以直接返回使用的内容（commonjs规范的模块）
      return value;
    }

    if (mode & 4 && typeof value === "object" && value && value.__esModule) {
      return true;
    }
    // 如果 8 和 4 都没成立，自定义ns，通过default属性返回内容
    let ns = Object.create(null);
    __webpack_require__.r(ns);
    Object.defineProperty(ns, "default", { enumerable: true, value: value });

    if (mode & 2 && typeof value !== "string") {
      for (var key in value) {
        __webpack_require__.d(
          ns,
          key,
          function () {
            return value[key];
          }.bind(null, key)
        );
      }
    }

    return ns;
  };

  // 09 定义 n 方法用于设置具体的 getter
  __webpack_require__.n = function (module) {
    let getter =
      module && module.__esModule
        ? function getDefault() {
            return module.default;
          }
        : function getModuleExports() {
            return module;
          };

    __webpack_require__.d(getter, a, getter);
    return getter;
  };

  // 10 定义 p 属性用于保存资源访问路径
  __webpack_require__.p = "";

  // 11 调用 __webpack_require__ 执行模块导入和加载操作
  return __webpack_require__((__webpack_require__.s = "./src/index.js"));
})({
  // entry 入口文件
  "./src/index.js": function (module, exports, __webpack_require__) {
    let name = __webpack_require__(/** ./login.js */ "./src/login.js");
    console.log("index.js 执行了");
    console.log(name);
  },
  "./src/login.js": function (module, exports, __webpack_require__) {
    module.exports = "aaaa";
  },
});