1. 程式人生 > >webpack打包

webpack打包

eal ade render this asset 編譯 pac main ack

webpack創建compiler實例,如果options是數組,則創建多個compiler;

初始化compiler,為compiler添加上下文context和options,初始化基本插件;

compiler調用run,run內調用compile方法,開始編譯;

compile內創建compilation對象,並將this傳入,compilation就包含了對compiler的引用;

compiler調用addEntry,addEntry調用_addModuleChain();

_addModuleChain查詢合適的工廠函數開始創建模板,並將其加入module鏈當中,調用buildModule();

buildModule是核心,包括module.js內調用的build(),build調用doBuild來查找合適的loader,並在回調函數內解析源文件,生成AST,來記錄源碼間的依賴行為

buildModule創建模板,根據depedencies創建依賴數組(期間調用addModuleDepedencies);

module創建完畢;

compiler調用seal,添加hash,調用addModule、addChunk(將module裝入chunk)對chunk和module開始封裝;

compilation調用createChunkAsset,開始生成最終代碼;

createChunkAsset內根據不同的module,調用MainModule.render,chunkTemplate.render進行進一步處理

MainModule.render,chunkTemplate.render內調用moduleTemplate.render

moduleTemplate.render調用module.source

module.source將生成好的代碼放入assets中

Compiler.emitAssets將compilation的assets輸出到目錄中

webpack打包