1. (function (modules) {
    2. // 14 定义 webpackJsonpCallback 实现:1.合并模块定义,2.改变 promise 状态执行后续行为
    3. function webpackJsonpCallback(data) {
    4. // 01 获取需要被动态加载的模块id
    5. let chunkIds = data[0]
    6. // 02 获取需要被动态加载的模块依赖关系对象
    7. let moreModuls = data[1]
    8. let chunkId, resolves = []
    9. // 循环判断 chunkLds 里对应的模块内容是否已经完成加载
    10. for (const iterator of chunkIds) {
    11. chunkId = iterator
    12. if (Object.prototype.hasOwnProperty.call(installedChunks, chunkId) && installedChunks[chunkId]) {
    13. resolves.push(installedChunks[chunkId][0])
    14. }
    15. // 更新当前的 chunk 状态
    16. installedChunks[chunkId] = 0
    17. }
    18. for (const moduleId in moreModuls) {
    19. if (Object.prototype.hasOwnProperty.call(moreModuls, moduleId)) {
    20. modules[moduleId] = moreModuls[moduleId]
    21. }
    22. }
    23. while (resolves.length) {
    24. resolves.shift()()
    25. }
    26. }
    27. // 01 定义对象用于将来缓存被加载过的模块
    28. let installedModules = {}
    29. // 15 定义 installedChunks 对于用于标识某个 chunkId 对应的 chunk 是否已经完成加载
    30. let installedChunks = {
    31. main: 0
    32. }
    33. // 02 定义一个 __webpack_require__ 方法来替换 import require 加载操作
    34. function __webpack_require__(moduleId) {
    35. // 2-1 判断当前缓存中是否存在要被加载的模块内容,如果存在则直接返回
    36. if (installedModules[moduleId]) {
    37. return installedModules[moduleId].exports
    38. }
    39. // 2-2 如果当前缓存中不存在则需要我们自己定义{} 执行被导入的模块内容加载
    40. let module = installedModules[moduleId] = {
    41. i: moduleId,
    42. l: false,
    43. exports: {}
    44. }
    45. // 2-3 调用当前 moduleId 对应的函数,然后完成内容的加载
    46. modules[moduleId].call(module.exports, module, module.exports, __webpack_require__)
    47. // 2-4 当上述的方法调用完成之后,我们就可以修改 l 的值用于表示当前模块内容已经加载完成了
    48. module.l = true
    49. // 2-5 加载工作完成之后,要将拿回来的内容返回至调用的位置
    50. return module.exports
    51. }
    52. // 03 定义 m 属性用于保存 modules
    53. __webpack_require__.m = modules
    54. // 04 定义 c 属性用于保存 cache
    55. __webpack_require__.c = installedModules
    56. // 05 定义 o 方法用于判断对象的身上是否存在指定的属性
    57. __webpack_require__.o = function (object, property) {
    58. return Object.prototype.hasOwnProperty(object, property)
    59. }
    60. // 06 定义 d 方法用于在对象的身上添加指定的属性,同时给该属性提供一个 getter
    61. __webpack_require__.d = function (exports, name, getter) {
    62. if (!__webpack_require__.o(exports, name)) {
    63. Object.defineProperty(exports, name, { enumerable: true, get: getter })
    64. }
    65. }
    66. // 07 定义 r 方法用于标识当前模块是 es6 类型
    67. __webpack_require__.r = function (exports) {
    68. if (typeof Symbol !== 'undefined' && Symbol.toStringTag) {
    69. Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" })
    70. }
    71. Object.defineProperty(exports, '__esModule', { value: true })
    72. }
    73. // 08 定义 n 方法,用于设置具体的 getter
    74. __webpack_require__.n = function (module) {
    75. let getter = module && module.__esModule ?
    76. function getDefault() { return module['default'] } :
    77. function getModuleExports() { return module }
    78. __webpack_require__.d(getter, 'a', getter)
    79. return getter
    80. }
    81. // 17 定义 jsonpScriptSrc 实现 src 的处理
    82. function jsonpScriptSrc(chunkId) {
    83. return __webpack_require__.p + '' + chunkId + '.built.js'
    84. }
    85. // 16 定义 e 方法 用于实现: 1.实现jonp来加载内容,2.利用 promise 实现异步加载操作
    86. __webpack_require__.e = function (chunkId) {
    87. // 01 定义一个数组用于存放 promise
    88. let promises = []
    89. // 02 获取 chunkId 对应的 chunk 是否已经完成加载
    90. let installedChunkData = installedChunks[chunkId]
    91. // 03 依据当前是已完成加载的状态来执行后续的逻辑
    92. if (installedChunkData !== 0) {
    93. if (installedChunkData) {
    94. promises.push(installedChunkData[2])
    95. } else {
    96. let promise = new Promise((resolve, reject) => {
    97. installedChunkData = installedChunks[chunkId] = [resolve, reject]
    98. })
    99. promises.push(installedChunkData[2] = promise)
    100. // 创建 script 标签
    101. let script = document.createElement('script')
    102. script.src = jsonpScriptSrc(chunkId)
    103. document.head.appendChild(script)
    104. }
    105. }
    106. // 执行 promise
    107. return Promise.all(promises)
    108. }
    109. // 11 定义 t 方法,用于加载指定 value 的模块内容,之后对内容进行处理再返回
    110. __webpack_require__.t = function (value, mode) {
    111. // 01 加载 value 对应的模块内容( value 一般就是模块 id )
    112. // 加载之后的内容又重新赋值给 value 变量
    113. if (mode & 1) {
    114. value = __webpack_require__(value)
    115. }
    116. if (mode & 8) { // 加载了可以直接返回使用的内容
    117. return value
    118. }
    119. if ((mode & 4) && typeof value === 'object' && value && value.__esModule) {
    120. return value
    121. }
    122. // 如果 8 和 4 都没有成立则需要自定义 ns 来通过 default 属性返回内容
    123. let ns = Object.create(null)
    124. __webpack_require__.r(ns)
    125. Object.defineProperty(ns, 'default', { enumerable: true, value: value })
    126. if (mode & 2 && typeof value !== 'string') {
    127. for (var key in value) {
    128. __webpack_require__.d(ns, key, function (key) {
    129. return value[key]
    130. }.bind(null, key))
    131. }
    132. }
    133. return ns
    134. }
    135. // 09 定义 P 属性,用于保存资源访问路径
    136. __webpack_require__.p = ""
    137. // 11 定义变量存放数组
    138. let jsonpArray = window['webpackJsonp'] = window['webpackJsonp'] || []
    139. // 保存原生 push 方法
    140. let oldJsonpFunction = jsonpArray.push.bind(jsonpArray)
    141. // 13 重写 push 方法
    142. jsonpArray.push = webpackJsonpCallback
    143. // 10 调用 __webpack_require__ 方法执行模块导入与加载操作
    144. return __webpack_require__(__webpack_require__.s = './src/index.js')
    145. })
    146. ({
    147. "./src/index.js":
    148. (function (module, exports, __webpack_require__) {
    149. let oBtn = document.getElementById('btn')
    150. oBtn.addEventListener('click', () => {
    151. __webpack_require__.e(/*! import() | login */ "login").then(__webpack_require__.t.bind(null, /*! ./login */ "./src/login.js", 7)).then(({ default: name }) => {
    152. console.info(name)
    153. })
    154. })
    155. console.info('index.js')
    156. })
    157. })