首页
AI Coding
NEW
沸点
课程
直播
活动
AI刷题
APP
插件
搜索历史
清空
创作者中心
写文章
发沸点
写笔记
写代码
草稿箱
创作灵感
查看更多
会员
登录
注册
webpack 源码研究
excel
创建于2025-03-02
订阅专栏
对webpack 进行源码研究,了解运作原理
等 10 人订阅
共60篇文章
创建于2025-03-02
订阅专栏
默认顺序
默认顺序
最早发布
最新发布
webpack JS meta 信息插件 /lib/JavascriptMetaInfoPlugin.js
插件名称定义为 JavascriptMetaInfoPlugin,并应用于 Webpack 的编译流程中。 监听 compiler.hooks.compilation 钩子,在编译过程中注入逻辑。 为
webpack 运行时模版 第 六 节 /lib/RuntimeTemplate.js
blockPromise(options) 功能:生成用于加载 chunk 的 Promise 表达式。 用途:支持异步模块(如 import())在 runtime 中正确加载 chunk。 逻辑:
webpack 运行时模版 第 五 节 /lib/RuntimeTemplate.js
runtimeConditionExpression 方法: 生成运行时条件表达式。 如果 runtimeCondition 未定义,返回 "true"。 如果 runtimeCondition 是布
webpack 运行时模版 第 四 节 /lib/RuntimeTemplate.js
✅ moduleNamespace 函数 用于生成访问模块命名空间的表达式(同步)。 module:要访问的模块对象,类型为 Module chunkGraph:Webpack 内部的 chunkGr
webpack 运行时模版 第 三 节 /lib/RuntimeTemplate.js
错误处理与模块缺失相关方法 throwMissingModuleErrorBlock({ request }) 生成同步语句的抛错代码块。 返回 var e = new Error(...); thr
webpack 运行时模版 第 二 节 /lib/RuntimeTemplate.js
构造函数 constructor 初始化 compilation、outputOptions、requestShortener 设置 globalObject(全局对象名,如 window、globa
webpack 运行时模版 第一节 /lib/RuntimeTemplate.js
模块导入部分: InitFragment:用于生成初始化代码片段。 RuntimeGlobals:包含 Webpack 运行时代码使用的全局变量集合。 Template:用于代码字符串生成和格式化。
webpack 检出图 第 十一 节 lib/ChunkGraph.js
ChunkGraphChunk 类 用于表示 ChunkGraph 中与某个 chunk 相关的模块信息和运行时依赖。 包含以下重要属性: modules:当前 chunk 中的模块集合(Sortab
webpack 检出图 第 十 节 lib/ChunkGraph.js
✅ _getModuleGraphHashWithConnections(cgm, module, runtime) 作用: 生成指定模块在某个 runtime 下,连同其“连接关系”后的唯一图结构哈
webpack 检出图 第 九 节 lib/ChunkGraph.js
✅ 模块与 Chunk 的运行时需求处理 addModuleRuntimeRequirements 为模块添加运行时依赖项。 支持“所有权转移”机制,以优化性能(避免 Set 拷贝)。 若该 runt
webpack 检出图 第 八 节 lib/ChunkGraph.js
🔹 ChunkGroup 相关 disconnectChunkGroup(chunkGroup) 移除所有 block 与该 ChunkGroup 的关联。 清空该 ChunkGroup 内部记录的
webpack 检出图 第 七 节 lib/ChunkGraph.js
🔧 Chunk 与 Entry Module 的连接管理 disconnectEntryModule(module) 移除某模块在所有 chunk 中的 entry 角色。 清除该模块记录的 entr
webpack 检出图 第 六 节 lib/ChunkGraph.js
🔄 integrateChunks(chunkA, chunkB) 合并两个 chunk 的内容,保留 chunkA,清除 chunkB。 决定合并后 chunk 的名称(基于 entry 和名称长度
webpack 检出图 第 五 节 lib/ChunkGraph.js
getChunkConditionMap(chunk, filterFn) 遍历 chunk 所引用的所有 chunk,应用过滤函数并返回 {chunkId: 是否通过} 映射。 hasModuleI
webpack 检出图 第 四 节 ChunkGraph.js
🔧 模块资源类型相关(SourceTypes) setChunkModuleSourceTypes(chunk, module, sourceTypes) 为某个 chunk 中的某个模块设置 sou
webpack 检出图 第 三 节 ChunkGraph.js
🌐 核心概念 Module: 表示一个模块(通常是一个 JS 文件)。 Chunk: 表示一组打包后的模块代码块(可能异步加载)。 ChunkGraphModule (cgm): 模块在图中的元信息(
webpack 检出图 第 二 节
🔧 构造函数初始化 初始化 3 个 WeakMap 存储结构: _modules:Module → ChunkGraphModule _chunks:Chunk → ChunkGraphChunk _
webpack 检出图 第 一 节
✅ 类型定义与常量 定义了多个模块类型、结构、函数签名等,用于 JSDoc 提示。 常量: EMPTY_SET:空集合,常用于默认值。 ZERO_BIG_INT:BigInt 形式的 0。 compa
webpack 模块图 第 五 节
依赖缓存机制 dependencyCacheProvide(dependency, ...args) 提供依赖级的缓存计算功能,优先使用模块级缓存,其次使用全局缓存。 兼容旧版 API 的方法(Web
webpack 模块图 第 四 节
📦 模块导出相关 判断模块是否提供某个导出(isExportProvided) 获取模块整体的导出信息(getExportsInfo) 获取具体某个导出的信息(getExportInfo) 获取某个导
下一页