webpack的hash
2022-11-12 15:57:56 0 举报123
作者其他创作
大纲/内容
在Compilation的seal方法中调用的call
Array
@seal
开始
通过这些AMD、RequireEnsure和Import，可以理解blocks大概是什么东西
JsonpChunkLoadingRuntimeModule
因此， 我们只需要找到上一步process（在webpackOptionsApply.js中）的时候与这些钩子相关的插件做了什么，大概流程就出来了
PrefetchDependency
@alilc/lowcode-editor-skeleton
通过一个Stack，一旦进入一个函数，就将函数push到stack里， 当前节点的函数就是stack顶部的函数，离开函数时，pop掉
FlagDependencyExportsPlugin
Event
遍历oldDelta的ops数组，进行拼接，注意如果用的editor-kit：1. editor-kit最后会始终有一个\符号， 如果不需要去除2.editor-kit使用*标识lmkr，转换时，需要特殊处理
NullDependency
AMDRequireDependenciesBlock
AMDRequireContextDependency
@processModuleDependencies
number
DllModuleFactory
RequireContextPlugin
entrieschunksnamedChunks
process.nextTick => process
DllReferencePlugin
enhanced-resolve/lib/CachedInputFileSystem
DependenciesBlock
SelfModuleFactory
onChange
正式打包，前面都是准备
extends
获取content
Module
FileSystem
AMDRequireDependency
paramIndex = 2
RequireEnsureDependency
@handleModuleCreation
arguments
@alilc/lowcode-designer
配置面板Plugin
DeterministicModuleIdsPlugin
CompatibilityPlugin
const compiler = webpack({...options})
binary-expression
ModuleHotDependency
settings-primary-pane
Dependency
DllPlugin
RequestJsStuffPlugin
ChunkGroup
SystemPlugin
property: items
RequireJsStuffPlugin
ProvideSharedPlugin
只是一个空的div，作为placeholder，实际的node由aliveScope提供，通过inject的方式将node注入到placehoder中
const oldDelta = zone.getContent(true)
closeToken is )
ConstPlugin
addModule
afterCompile
compiler.hooks.compilation.tap
1
apply时，会同步触发onChange
SourceMapSource
SourceMapDevToolPlugin
RequireResolveContextDependency
EntryPlugin
TOKENIZE
JsonpTemplatePlugin
HotUpdateChunk
ref客户ID
_factorizeModule
......
*
ContextModuleFactory
ChunkGraph
factory.create
点击添加函数
ImportWeakDependency
compilation
InnerGraphPlugin
ProgressPlugin
@buildModule
RuntimeModule
RawModule
NodeStuffPlugin
DefaultStatsPrinterPlugin
HarmonyModulesPlugin
AutomaticPrefetchPlugin
主体
ModuleConcatenationPlugin
LibManifestPlugin
RequireHeaderDependency
Source
HarmonyExportHeaderDependency
PrefetchPlugin
ProvideDependency
获取当前选区位置pos
BannerPlugin
left
apply
DynamicEntryPlugin
ModuleFactory
EvalSourceMapDevToolPlugin
22
EvalDevToolModulePlugin
beforeCompile
JavascriptModulesPlugin
this.editor.getContentState().apply(newDelta);
遍历tokens
JavascriptParser
FlagUsingEvalPlugin
RequireEnsureDependenciesBlock
ContextDependency
settings: SettingTopEntry
EntryDependency
DllEntryDependency
人工输入
Pack
Date
遍历tokens， 找到位置pos对应点的token
NormalModuleFactory
EntryPlugin.createDependency
2
在make阶段执行
CommonJsSelfReferenceDependency
this.editor.selection.setSelection(selection);
new ExternalModuleFactoryPluginspan style=\"font-size: inherit;\
+
DelegatedModuleFactoryPlugin
ContextModule
graceful-fs
SingleEntryPlugin
_processModuleDependencies
Stats
DelegatedSourceDependency
WebpackOptionsApply
一路callback到compiler
ExportsInfoApiPlugin
bundle
4
ExternalModule
EditorEventType.SELECTION_CHANGE
compilation.hooks.chunkHash.tap
根据token类型， 调用delta.insert插入文档
new EntryOptionPlugin
ref
还原光标位置
HarmonyAcceptDependency
3
new Compilation
StaticExportsDependency
const newDelta = new ZoneDelta({ zoneId: zoneId }).retain(0).delete(length);
@addModule
method: render
创建新ZoneDelta
const newDelta = new ZoneDelta({ zoneId:zone.getZoneId() }) .retain(start) .delete(len) .insert(`${func.name}()`); editor.getContentState().apply(newDelta);
DelegatedModule
添加函数名称和括号
processor
Compilation.processDependenciesQueue
CommonJsRequireContextDependency
Entrypoint
Editor Ops
RequireIncludeDependency
addModuleChain
new EntryPlugin
JsonExportsDependency
如何理解factory？当做create就好了，创建工厂
HarmonyExportSpecifierDependency
基础框架
UnsupportedDependency
根据settings.item渲染配置表单Setter
EntryOptionPlugin
Parser
ModuleHotAcceptDependency
Generator
compilation.processModuleDependencies
new EntryDependency
method: setValue
new Chunk
WarnDeprecatedOptionPlugin
SourceMapDevToolModuleOptionsPlugin
const Dep = /** @type {DepConstructor} */ (dependency.constructor);const moduleFactory = this.dependencyFactories.get(Dep);
ProvidePlugin
@createCompiler
ContextElementDependency
APIPlugin
property: main
NodeEnviromentPlugin
FlagDependencyUsagePlugin
ExternalModuleFactoryPlugin
Cache
FuncInfo
ModuleDependency
RawSource
RuntimeGlobals
Entry
ContainerEntryDependency
HarmonyExportExpressionDependency
paramIndex = 1
ConsumeFallbackDependency
>
构建函数：1. 定义钩子2. 如何resolve，如何解析（rules）3. 订阅factorize和resolve事件
RecordIdsPlugin
LoaderDependency
RemoveEmptyChunksPlugin
MangleExportsPlugin
new Compliation
NoEmitOnErrorsPlugin
MainTemplate
LoaderPlugin
ProvidedDependency
@factorizeModule
IdleFileCachePlugin
DllModule
ModuleGraph
DefaultStatsPresetPlugin
TemplatedPathPlugin
plugin被调用的阶段如下图
compilation.hooks.contentHash.tap
DllEntryPlugin
WebAssemblyExportImportedDependency
FallbackDependency
对应的就是Resolver的normal类型
CommonJsFullRequiredDependency
DependenciesBlock
RuntimePlugin
enhanced-resolve
AsyncDependenciesBlock
ImportContextDependency
paramIndex = 0
遍历结束apply delta
NormalModule
XX Plugin
ModuleInfoHeaderPlugin
callback
Plugin/Setter
获取当前光标位置selection
compiler.run()
compiler.run
画布 Plugin
normalModuleFactory.hooks.factorize.tapAsync
OriginSource
ExportsInfoDependency
更新nodes数组，并循环渲染keeper
handleModuleCreation
_buildModule
EnsureChunkConditionsPlugin
root
IgnorePlugin
HotModuleReplacementPlugin
Global
通过Context提供keep等方法
function
NormalModuleReplacementPlugin
create chunk by entry
ContainerPlugin
dependenciesblocks
AsnycDependenciesBlock
End
对应的processor就是核心处理逻辑
@newCompilationcreateCompilation
compilation.hooks.renderManifest.tap
entry
CachedConstDependency
将content拼接为完整字符串
#entryOption
参考右图decorate
depth = 2
LocalModuleDependency
this.entry
Factories
@addModuleChain
RequireResolveHeaderDependency
items: SettingField
emit change
LoaderTargetPlugin
ConstDependency
WarnCaseSensitiveModulesPlugin
ExternalsPlugin
初始化时，调用Context中的keep方法，注册id和children
_addModule
externals: { jquery: jQuery}
Keeper
watchpack
new WebpackOptionsApply
Compiler
tapable
OptionsApply
DefinePlugin
MergeDuplicateChunksPlugin
make阶段 - EntryPlugin
DependencyTemplates
ModuleProfile
addEntry
对字符串进行tokenize、parse、decorate
right
#name 表示hooks，比如#make，表示this.hooks.make
ContextExclusionPlugin
根据token，得到funcInfo和paramIndex
PackFileCacheStrategy
RuntimeRequirementsDependency
AMDRequireArrayDependency
FlagEntryExportAsUsedPlugin
DeterministicChunkIdsPlugin
ContextReplacementPlugin
LibraryTemplatePlugin
compilation.addModule
ModuleDecoratorDependency
ExternalPlugin
什么是resolver，其实就是node找node_modules包的升级版
compile
webpack.js
LoaderOptionsPlugin
Template
AliveScope
NullFactory
DefaultStatsFactoryPlugin
factorizedModule/addModule等方法就会将对应的module加入对应的queue，并且调用对应的processor方法，与processor进行了关联
渲染出函数辅助提示
ChunkTemplate
CommonJsPlugin
ModuleTemplate
CommonJsRequireDependency
const pos = e.current.toPosition();
compiler = createCompiler
ResolverFactory
RequestShortener
修改选区
UseStrictPlugin
emit
RequireContextDependency
RequireEnsurePlugin
RequireEnsureItemDependency
const selection = this.editor.selection.getSelection();
MemoryCachePlugin
知识储备
setting-field
PARSE
Watching
ImportEagerDependency
@process
paramIndex = undefined
KeepAlive
WarnNoModeSetPlugin
Plugins
HarmonyCompatibilityDependency
AMDDefineDependency
HarmonyImportDependency
compilation.addEntry
遍历树， 补充1. 函数信息2.错误信息
withDots(5)
GlobalFormulaPlugin
ref 公司ID
WasmFinalizeExportsPlugin
module.build
CommonJsExportsDependency
depth = 1
factorizeModule
@addEntry
RequireIncludePlugin
notifyValueChange
DelegatedPlugin
WebpackOptionsDefaulter
createSetterContent
PackContainer
PureExpressionDependency
make
validateSchema
Chunk
createCompiler
WebAssemblyImportDependency
mime-types
new Compiler
compilation.buildModule
JavascriptGenerator
DECORATOR
setting-top-entry
ImportPlugin
start
WatchIgnorePlugin
#make
AMDPlugin
EditorEventType.CONTENT_CHANGE
Map/WeakMap
webpack-sources
create函数触发beforeResolve钩子，通知订阅的plugin，有没有plugin订阅没关系，但是始终会执行后面的回调
对应的就是Resolver的context类型
SideEffectsFlagPlugin
Compilation.entries
关联
EnvironmentPlugin
Compilation
ModuleHotDeclineDependency
compiler.compile()
ImportDependenciesBlock
compiler.hooks.compile.tap
这个方法比较关键，内部使用了很多内置的plugin，\t这些plugin就提前将compilation、make等hook注册到compliation/compiler的hooks上，后面再compile的过程中，就会触发这里plugin注册的hook方法；
生成/更新compilation.entries
Event Bus
FlagAllModulesAsUsedPlugin
DependencyTemplate
ModuleGraphConnection
field.setValue
AMDRequireItemDependency
FlagIncludedChunksPlugin
new WebpackOptionsApply().process()
ImportDependency
RequireResolveDependency
遍历this.entries生成chunk，这里的this.entries是在其他地方赋值的
收藏
收藏
0 条评论
下一页
