webpack模块加载
(function (modules) {
//1.定义对象用来缓存被加载过的模块
let installedModules = {}
//2.定义一个 _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,//存放id
l: false,//是否加载
exports: {}
}
//2-3 调用当前moduleId对应的函数，完成内容的加载
modules[moduleId].call(module.exports, module, module.exports, __webpack_require__)
//2-4 调用完成之后，修改l的值为true 标识当前模块内容加载完成
module.l = true
//2-5 加载完成 将拿回内容返回至调用位置
return module.exports
}
//3.定义 m 属性保存modules
__webpack_require__.m = modules
//4.定义 c 属性保存cache
__webpack_require__.c = installedModules
//5.定义 o 方法用于判断对象的身上是否存在指定的属性
__webpack_require__.o = function (object, property) {
return Object.prototype.hasOwnProperty(object, property)
}
//6.定义d方法用于在对象的身上添加指定的属性，同时给该属性添加一个 getter
__webpack_require__.d = function (exports, name, getter) {
if (__webpack_require__.o(exports, name)) {
Object.defineProperty(exports, name, { enumerable: true, get: getter })
}
}
//7. 定义 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 })
}
//8 定义 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
}
//11 定义 t 方法，用于加载指定 value的模块内容 之后对内容进行处理再返回
__webpack_require__.t = function (value, mode) {
//加载value对应的模块内容 value一般为模块id
//1 8 加载了可以直接返回的内容 commonJs规范
if (mode & 1) {
value = __webpack_require__(value); //记载后重新赋值给value
}
if (mode & 8) {
return value
}
//esmodule规范
if ((mode & 4) && typeof value === 'object' && value && value.__esModule) {
return value;
}
//8与4都不成立 需要定义ns来通过 default 属性返回内容
var ns = Object.create(null);
__webpack_require__.r(ns);//标记esmodule
Object.defineProperty(ns, 'default', { enumerable: true, value: value });
if (mode & 2 && typeof value != 'string') {
for (var key in value) {
//如果为对象 遍历 给每一个属性添加一个getter方法
__webpack_require__.d(ns, key, function (key) {
return value[key];
}.bind(null, key));
}
}
return ns;
};
//9 定义 P 属性，用于i保存资源访问路径
__webpack_require__.p = ""
//10 调用 __webpack_require__ 方法执行模块导入与加载操作
return __webpack_require__(__webpack_require__.s = "./src/index.js")
})
({
"./src/main.js":
(function (module, exports) {
console.log('ssssssssss')
})
});
异步模块加载
- 通过 import()实现指定模块的懒加载操作
- 懒加载的核心原理就是创建jsonp 即动态创建script标签
- t方法针对内容进行不同的处理（处理方式取决于传入的数字 8 6 7 3 2 1）
webpack编译流程
- 配置初始化
- 内容编译
- 输出编译后内容
时间驱动型事件流工作机制
将不同的插件串联起来，完成所有工作
核心 complier(负责编译) compilation(负责创建bundles)
tapable 本身就是一个独立的库 在webpack大量使用
tapable工作流程 - 实例化 hook 注册事件监听
- 通过 hook 触发事件监听
- 执行懒编译生成的可执行代码
Hook执行特点
- Hook:普通钩子，监听器之间互相独立不干扰
- BailHook: 熔断钩子，某个监听返回非 undefined 时后续不执行
- WaterfallHook: 瀑布钩子，上一个监听的返回值可传递至下一个
- LoopHook:循环钩子，如果当前未返回false 则一直执行
Hook本质是tapable实例对象，Hook执行机制可分为同步和异步
tapable库同步钩子
- SynckHook
- SyncBailHook
- SyncWaterfallHook
- SyncLoopHook
tapable库异串行钩子 - AsyncSeriesHook
- AsyncSeriesBailHook
- AsyncSeriesWaterfallHook
tapable库异并行钩子 - AsyncParalleHook
- AsyncParalleBailHook
const { SyncHook } = require('tapable')
let hook = new SyncHook(['name', 'age'])
hook.tap('one', function (name, age) {
console.log('one--->', name, age)
})
hook.tap('two', function (name, age) {
console.log('two--->', name, age)
})
hook.call('jay', 40)
