打包后的源码分析
// /src/index.js
import name from './login'
console.log('index.js=[' + name + ']')
// /src/login.js
module.exports = "zce"
// dist/built.js
(function (modules) {
// 01 定义对象用于将来缓存被加载过的模块
let installedModules = {}
// 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 用户保存缓存 catch
__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 && modules.__esModule ?
function getDefault() { return module['default'] } :
function getmoduleExports() { return module }
__webpack_require__.d(getter, 'a', getter)
}
// 09 定义 p 属性， 用于保存资源访问路径
__webpack_require__.p = ""
// 调用 __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"] = ('小明是一个帅哥');
const age = 40
})
})
如何实现的懒加载
- import() 嗯可以实现指定模块的懒加载操作
- 当前懒加载的核心原理就是
jsonp -
t方法可以针对于内容进行不同的处理（处理方式取决于传入的数值 8 6 7 3 2 1）
t方法分析及实现
// 11 定义 t 方法，用于加载指定 value 的模块内容，之后对内容进行处理再返回
__webpack_require__.t = function (value, mode) {
// 01 加载 value 对应的模块内容（ value 一般就是模块 id ），第二个值 mode 是一个二进制的数值
// 02 t 方法内部做的第一件事情就是调用自定义的 require 方法加载 value 对应的模块导出，
// 加载之后的内容又重新赋值给 value 变量
// 03 当获取 到了这个 value 值之后余下的 8 4 ns 2 都是对当前的内容进行加工处理，然后返回使用
// 04 当 mode & 8 成立时直接将 value 返回 ( commonJS)
// 05 当 mode & 4 成立时直接将 value 返回 ( esModule )
// 06 如果上述条件都不成立，还是要继续处理 value, 定义一个 ns {}
// 6-1 如果拿到的 value 是一个可以直接使用的内容，例如是一个字符趾，将它挂载到 ns 的 default 属性上
// 6-2 如果拿到的 value 是一个对象，则调用 d 方法添加属性和 getter 方法
if (mode & 1) {
value = __webpack_require__(value)
}
if (mode & 8) { // 加载了可以直接返回使用的内容 1 和 8 说明是一个commonjs内容
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
}
tapable工作流程
- 实例化
hook注册事件监听 - 通过
hook触发事件监听 - 执行懒编译生成的可执行代码
Hook 本质是 tapbale 实例对象
-
Hook执行机制可分为同步和异步
Hook 执行特点
-
Hook: 普通钩子，监听器之间互相独立不干扰 -
BailHook: 熔断钩子，某个监听返回非undefined时后续不执行 -
WaterfallHook: 瀑布钩子，上一个监听的返回值可传递至下一个 -
LoopHook: 循环钩子，如果当前未返回false则一直执行
tapable 库同步钩子
SyncHookSyncBailHookSyncWaterfallHookSyncLoopHook
tapable 库异步串行钩子
AsyncSeriesHookAsyncSeriesBailHookAsyncSeriesWaterfallHook
tapable 库异步并行钩子
AsyncParalleHookAsyncParalleBailHook
Ast 在线调试
astexplorer.net
