手写功能函数
当我们用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
