(function (modules) { // 14 定义 webpackJsonpCallback 实现:1.合并模块定义,2.改变 promise 状态执行后续行为 function webpackJsonpCallback(data) { // 01 获取需要被动态加载的模块id let chunkIds = data[0] // 02 获取需要被动态加载的模块依赖关系对象 let moreModuls = data[1] let chunkId, resolves = [] // 循环判断 chunkLds 里对应的模块内容是否已经完成加载 for (const iterator of chunkIds) { chunkId = iterator if (Object.prototype.hasOwnProperty.call(installedChunks, chunkId) && installedChunks[chunkId]) { resolves.push(installedChunks[chunkId][0]) } // 更新当前的 chunk 状态 installedChunks[chunkId] = 0 } for (const moduleId in moreModuls) { if (Object.prototype.hasOwnProperty.call(moreModuls, moduleId)) { modules[moduleId] = moreModuls[moduleId] } } while (resolves.length) { resolves.shift()() } } // 01 定义对象用于将来缓存被加载过的模块 let installedModules = {} // 15 定义 installedChunks 对于用于标识某个 chunkId 对应的 chunk 是否已经完成加载 let installedChunks = { main: 0 } // 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 } // 17 定义 jsonpScriptSrc 实现 src 的处理 function jsonpScriptSrc(chunkId) { return __webpack_require__.p + '' + chunkId + '.built.js' } // 16 定义 e 方法 用于实现: 1.实现jonp来加载内容,2.利用 promise 实现异步加载操作 __webpack_require__.e = function (chunkId) { // 01 定义一个数组用于存放 promise let promises = [] // 02 获取 chunkId 对应的 chunk 是否已经完成加载 let installedChunkData = installedChunks[chunkId] // 03 依据当前是已完成加载的状态来执行后续的逻辑 if (installedChunkData !== 0) { if (installedChunkData) { promises.push(installedChunkData[2]) } else { let promise = new Promise((resolve, reject) => { installedChunkData = installedChunks[chunkId] = [resolve, reject] }) promises.push(installedChunkData[2] = promise) // 创建 script 标签 let script = document.createElement('script') script.src = jsonpScriptSrc(chunkId) document.head.appendChild(script) } } // 执行 promise return Promise.all(promises) } // 11 定义 t 方法,用于加载指定 value 的模块内容,之后对内容进行处理再返回 __webpack_require__.t = function (value, mode) { // 01 加载 value 对应的模块内容( value 一般就是模块 id ) // 加载之后的内容又重新赋值给 value 变量 if (mode & 1) { value = __webpack_require__(value) } if (mode & 8) { // 加载了可以直接返回使用的内容 return value } if ((mode & 4) && typeof value === 'object' && value && value.__esModule) { return value } // 如果 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 (key) { return value[key] }.bind(null, key)) } } return ns } // 09 定义 P 属性,用于保存资源访问路径 __webpack_require__.p = "" // 11 定义变量存放数组 let jsonpArray = window['webpackJsonp'] = window['webpackJsonp'] || [] // 保存原生 push 方法 let oldJsonpFunction = jsonpArray.push.bind(jsonpArray) // 13 重写 push 方法 jsonpArray.push = webpackJsonpCallback // 10 调用 __webpack_require__ 方法执行模块导入与加载操作 return __webpack_require__(__webpack_require__.s = './src/index.js')}) ({ "./src/index.js": (function (module, exports, __webpack_require__) { let oBtn = document.getElementById('btn') oBtn.addEventListener('click', () => { __webpack_require__.e(/*! import() | login */ "login").then(__webpack_require__.t.bind(null, /*! ./login */ "./src/login.js", 7)).then(({ default: name }) => { console.info(name) }) }) console.info('index.js') }) })