Webpack 功能函数手写实现

手写功能函数

当我们用Webpac打包后，无论前面经历了什么，最终都会产生一个或多个目标JS文件。这些JS文件中主要是会生成一个自调用的函数，它会接收一个对象作为参数（我们称之为模块定义），然后用它的键作为查询的模块ID，它的值作为要执行的函数，在执行函数的过程中就完成了当前模块ID所对应的模块内容的加载，同时针对不同的模块类型，Webpack还会使用到不同的工具方法（例如：r、t、n、d ...）.

这里我们先不去考虑作为参数使用的模块定义对象是如何生成的，我们先来写一写这些工具方法，以便于能更加清晰的理解模块加载的流程，后续再关注其他的环节。

任务：复现built.js里的函数

缓存优先原则

模拟打包后的js文件 built.js

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

    // 02 定义一个 __webpack_require__ 方法替换 import require 加载操作
    function __webpack_require__(moduleId) {
        // 2-1 判断当前缓存是否存在要被加载的模块内容，如果存在则直接返回
        if (installedModules[moduleId]) {
            return installedModules[moduleId].exports;
        }

        // 2-2 如果缓存中不存在则需要我们自己定义{} 执行被导入的模块内容加载
        let module = installedModules[moduleId] = {
            i: moduleId,
            l: false,
            exports: {}
        }

        // 2-3 调用当前 moduleId 对应的函数，然后完成内容的加载
        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__)

        // 2-4 当上述的方法完成调用之后，修改 l 的值用于表示当前模块已经加载完成
        module.l = true;

        // 2-5 加载工作完成之后，把内容返回至调用的位置
        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 (exports, name, 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.defineProperty(exports, Symbol.toStringTag, { value: 'Module' })
        }
        Object.defineProperty(exports, '__esModule', { value: true })
    }

    // 08 定义 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;
    }

    // 09 定义 p 属性，用于保存资源访问路径
    __webpack_require__.p = ''

    // 10 调用 __webpack_require__ 执行模块导入与加载操作
    return __webpack_require__(__webpack_require__.s = './src/index.js');

})
    ({
        "./src/index.js":
            (function (module, __webpack_exports__, __webpack_require__) {
                "use strict";
                __webpack_require__.r(__webpack_exports__);
      /* harmony import */ var _login__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./login */ "./src/login.js");
      /* harmony import */ var _login__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_login__WEBPACK_IMPORTED_MODULE_0__);
                console.log('index.js 执行了！')
                console.log(_login__WEBPACK_IMPORTED_MODULE_0___default.a, '<------');
            }),
        "./src/login.js":
            (function (module, exports) {
                module.exports = 'kk学习'
            })
    });

源码: 02-02-05-06-wp-source-handwritting