整體我們將會從上邊5個方面來分析Webpack打包流程:
1.初始化參數(shù)階段
這一步會從我們配置的webpack.config.js中讀取到對應(yīng)的配置參數(shù)和shell命令中傳入的參數(shù)進(jìn)行合并得到最終打包配置參數(shù)姜凄。
2.開始編譯準(zhǔn)備階段
這一步我們會通過調(diào)用webpack()方法返回一個compiler方法,創(chuàng)建我們的compiler對象趾访,并且注冊各個Webpack Plugin态秧。找到配置入口中的entry代碼,調(diào)用compiler.run()方法進(jìn)行編譯扼鞋。
3.模塊編譯階段
從入口模塊進(jìn)行分析申鱼,調(diào)用匹配文件的loaders對文件進(jìn)行處理。同時分析模塊依賴的模塊云头,遞歸進(jìn)行模塊編譯工作捐友。
4.完成編譯階段
在遞歸完成后,每個引用模塊通過loaders處理完成同時得到模塊之間的相互依賴關(guān)系盘寡。
5.輸出文件階段
整理模塊依賴關(guān)系楚殿,同時將處理后的文件輸出到ouput的磁盤目錄中。
鏈接:https://www.zhihu.com/question/473737575/answer/2339126396