本文也输出来自拉勾教育的课程，感觉对于webpack这个打包结果讲解第就一个字通透，所以本文的笔记大部分就是老师敲的源码，再在一些地方加上自己的理解
(function (modules) {
// 14定义webpackJsonpCallback实现，实现：合并模块定义，改变Promise状态执行后续行为
// 合并模块定义，就是把懒加载的模块挂载到modules上
// 改变Promise状态就是遍历data.chunkIds，然后把值为数组对象的installedChunks[chunkId]的第一项也就是resolve函数放入resolves，然后把installedChunks[chunkId]置为0
function webpackJsonpCallback(data) {
// 01回去需要被动态的模块id
var chunkIds = data[0];
// 02获取需要被动态加载的模块依赖关系对象
var moreModules = data[1];
// add "moreModules" to the modules object,
// then flag all "chunkIds" as loaded and fire callback
var moduleId, chunkId, i = 0, resolves = [];
// 循环判断chunkIds里对应的模块内容是否已经完成了加载
for (; i < chunkIds.length; i++) {
chunkId = chunkIds[i];
if (Object.prototype.hasOwnProperty.call(installedChunks, chunkId) && installedChunks[chunkId]) {
resolves.push(installedChunks[chunkId][0]);
}
// 更新当前的chunk状态
installedChunks[chunkId] = 0;
}
for (moduleId in moreModules) {
if (Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {
// 合并模块
modules[moduleId] = moreModules[moduleId];
}
}
// 执行所有resolve
while (resolves.length) {
resolves.shift()();
}
};
// 定义jsonpScriptSrc实现src的处理
function jsonpScriptSrc(chunkId) {
return __webpack_require__.p + "" + chunkId + ".built.js"
}
// 01 定义对象用于将来缓存被加载过的模块
let installedModules = {}
// 15 定义installedChunks对象用于标识某个chunkId 对应的 chunk 是否完成了加载
// 0加载成功
// Promise正在加载
// undefined未加载
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
}
// 16 实现jsonp来加载内容 利用Promise来实现异步加载操作
// jsonp就是动态生成一个script标签，该script的src指向${chunkId}.built.js
// 利用Promise就是返回一个promise.all(promises)，也就是为了让主程序中的操作是在模块加载完（也就是执行完webpackJsonpCallback）后执行
__webpack_require__.e = function requireEnsure(chunkId) {
// 01定义一个数组用于存放promise对象
var promises = [];
// 02获取chunkId对应的 chunk
var installedChunkData = installedChunks[chunkId];
// 03 依据当前installedChunkData是否是已完成加载的状态来执行后续的逻辑
if (installedChunkData !== 0) { // 0 means "already installed".
// .
if (installedChunkData) {
promises.push(installedChunkData[2]);
} else {
// setup Promise in chunk cache
var promise = new Promise(function (resolve, reject) {
installedChunkData = installedChunks[chunkId] = [resolve, reject];
});
promises.push(installedChunkData[2] = promise);
// 创建标签，开始加载chunk
var script = document.createElement('script');
// 设置src
script.src = jsonpScriptSrc(chunkId);
document.head.appendChild(script);
}
}
// 执行promise
return Promise.all(promises);
};
// 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 --设置一个返回module默认值的对象
__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
}
// 11 定义 t 方法，用于加载指定 value 的模块内容，之后对内容进行处理再返回
__webpack_require__.t = function (value, mode) {
// 01 加载 value 对应的模块内容（ value 一般就是模块 id ）
// 加载之后的内容又重新赋值给 value 变量
if (mode & 1) { //按位与预算就是看mode的二进制值在哪几位是1
value = __webpack_require__(value)
}
if (mode & 8) { // 加载了可以直接返回使用的内容
return value //commonJs
}
if ((mode & 4) && typeof value === 'object' && value && value.__esModule) {
return value //esmodule且default是对象
}
// 如果 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定以变量存放数组
var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || [];
// 12保存原生的push方向
var oldJsonpFunction = jsonpArray.push.bind(jsonpArray);
// 13重写原生的push方向
jsonpArray.push = webpackJsonpCallback;
jsonpArray = jsonpArray.slice();
for (var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);
var parentJsonpFunction = oldJsonpFunction;
// 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__);
var _login_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./login.js */ "./src/login.js");
console.log('index.js 执行了')
console.log(_login_js__WEBPACK_IMPORTED_MODULE_0__["default"], '<------')
console.log(_login_js__WEBPACK_IMPORTED_MODULE_0__["age"], '<------')
}),
"./src/login.js":
(function (module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
__webpack_require__.d(__webpack_exports__, "age", function () { return age; });
__webpack_exports__["default"] = ('zce是一个帅哥');
const age = 40
})
})
