webpack4源码流程图
2022-06-21 16:18:23 0 举报webpack4源码流程图
作者其他创作
大纲/内容
触发make
make过程结束
JavascriptModulesPluginmainTemplate.hooks.renderManifest
结束
compilation.createChunkAssets
mainTemplate.getRenderManifest
compilation触发buildModule构建模块
createSource生成loader过后的源码信息
_addModuleChain
开始
webpack初始化
创建当前node环境NodeEnvironmentPlugin
compilation的buildModule结束
JavascriptModulesPluginchunkTemplate.hooks.renderManifest
chunkTemplate.getRenderManifest
触发moduleFactory的resolve方法
compilation.emitAsset提交编译过后的文件
Compiler.emitAssets输出打包过后的文件
分包优化等操作
compilation.createModuleAssets
加载所有的plugins
seal过程开始
执行loader-runner的runLoaders方法加载所有的loader
触发对应模块的build方法(NormalModule)
根据入口文件添加compilation.addEntry
创建NormalModuleFactory和ContextModuleFactory
否
compiler.run开始执行
创建compiler、compilation对象、初始化webpack参数等
触发事件
log系统、watch系统、file系统
创建Compiler对象
compiler开始编译
mini-css-extract-plugin就是利用了getRenderManifest
run开始编译主要是加载本地入口文件，添加入库module
是
EntryOptionPlugin加载入口文件
获取requests、loader信息
seal过程依赖优化、编译源码、提交资源文件等等
创建Compilation
compilation触发addModule添加模块
根据options加载默认的配置WebpackOptionsApply
Template.render获取源码
加载默认的配置WebpackOptionsDefaulter
是否是异步模块
webpack打包文件输出
触发moduleFactory的create方法
创建EntryPlugin入口插件
获取对应的module的moduleFactory
make过程主要做模块的解析、获取当前模块的request、loaders、源码等信息
模块里面包含源码、解析器等等
createModule(NormalModule)创建模块信息
addModuleDependence对模块中管理的依赖继续编译，跟之前的_addModuleChain类似
模块开始解析源码parse(acorn)
0 条评论
下一页
为你推荐
查看更多
