浅谈 Webpack 背后的运行机制

接着从第二行开始， installedChunkData 从缓存中取值，显然首次加载 chunk 时此处是 undefined。接下来， installedChunkData 的 undefined 值触发了第一层 if 语句的判断条件。紧接着进行到第二层 if 语句，此时根据判断条件走入 else 块，这里 if 块里的内容我们先战略跳过，else 里主要有两块内容，一是 chunk 脚本加载过程，这个过程创建了一个 script 标签，使其请求 chunk所在地址并执行 chunk 内容;二是初始化 promise ，并用 promise 控制 chunk 文件加载过程。

不过，我们只在这段 else 代码块中找到了 reject 的使用处，也就是在 chunk 加载异常时 chunk[1](error) 的地方，但并没发现更重要的 resolve 的使用地点，仅仅是把 resolve 挂在了缓存上 (installedChunks[chunkId] = [resolve, reject])。

这里的 chunk 文件加载下来会发生什么呢?让我们打开 dist/0.js 一探究竟：

(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[0], { 
"./src/utils/math.js": 
(function (module, __webpack_exports__, __webpack_require__) { 
 
 
"use strict"; 
__webpack_require__.r(__webpack_exports__); 
/* harmony export (binding) */ 
__webpack_require__.d(__webpack_exports__, "plus", function () { 
return plus; 
}); 
const plus = (a, b) => { 
return a + b; 
}; 
}) 
}]); 

我们发现了：

1. 久违的 ./src/utils/math.js 模块
2. window["webpackJsonp"] 数组的使用地点

（编辑：PHP编程网 - 黄冈站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!