三大階段
初始化階段
1.初始化參數(shù) : 從配置文件webpck.config.js和shell語句(命令行參數(shù))中讀取、合并參數(shù)獲得最終參數(shù)。 實例化插件Plugin . 即執(zhí)行new Plugin
2.實例化編譯對象compiler: 通過上一步獲得的參數(shù)初始化編譯對象compiler實例. compiler負(fù)責(zé)文件監(jiān)聽和啟動編譯。compiler包含了完整的webpack配置碴里,
全局只有一個compiler對象。
3.加載插件:也即注冊插件川尖。 依次調(diào)用插件的apply方法翩概,讓插件可以監(jiān)聽到后續(xù)編譯過程的所有事件結(jié)點(diǎn)涉馁;同時向插件中傳入compiler實例汪疮,以便插件可以
通過compiler來調(diào)用webpack的api
4.environment: 環(huán)境峭火。開始應(yīng)用nodejs風(fēng)格的文件系統(tǒng)到compiler對象,以便后續(xù)過程中的文件尋找和讀取
5.entry-option: 從參數(shù)中的拿到entrys智嚷,并為每個入口實例化一個EntryPlugin卖丸。為后續(xù)entry的遞歸解析做準(zhǔn)備
6.after-plugin: 調(diào)用完所有的內(nèi)置和配置的插件的apply方法。即插件全部注冊完畢
7.after-resolvers: 根據(jù)配置初始化resolver[負(fù)責(zé)在文件系統(tǒng)中尋找指定路徑的文件]
編譯階段
1.run : 啟動編譯
2.watch-run: 和run類似盏道,區(qū)別在于它是在監(jiān)聽模式下啟動編譯稍浆。在這個事件中,可以獲取到是哪些文件發(fā)生了變化導(dǎo)致重新編譯
3.compile: 該事件告訴插件猜嘱,一次新的編譯將要啟動衅枫,同時會給插件帶上compiler對象
4.compilation: 編譯階段最重要的事件。開發(fā)模式下朗伶,每當(dāng)文件變動就會創(chuàng)建一個對象Compilation, 它包含當(dāng)前模塊資源弦撩、編譯生成資源、變化的文件腕让。
同時也會提供很多事件回調(diào)給到插件以便進(jìn)行擴(kuò)展
4.1 build-module: 使用對應(yīng)的loader去轉(zhuǎn)換一個模塊
4.2 normal-module-loader: Loader轉(zhuǎn)換完一個模塊后孤钦,使用acorn解析轉(zhuǎn)換后的內(nèi)容,生成對應(yīng)的抽象語法樹AST纯丸。 以便webpack后續(xù)的代碼進(jìn)行分析
4.3 program: 弄清所有模塊的依賴關(guān)系。從配置的入口開始静袖,分析其AST觉鼻, 當(dāng)遇到require導(dǎo)入其他模塊語句時,將其加入依賴列表中队橙。
對新找出的依賴進(jìn)行遞歸分析坠陈,最終搞清楚所有模塊的依賴關(guān)系
5.seal:密封萨惑。 所有模塊及其依賴模塊都通過Loader轉(zhuǎn)換完成,根據(jù)依賴關(guān)系開始生成chunk
輸出階段
1.should-emit (發(fā)出): 所有需要輸出的文件內(nèi)容已經(jīng)生成仇矾,詢問插件有哪些需要輸出庸蔼,哪些不需要輸出。
2.emit: 執(zhí)行文件輸出 贮匕。 可以在這里獲取和修改輸出的內(nèi)容姐仅。
3.after-emit: 文件輸出結(jié)束
4. done:成功完成一次完整的編譯和輸出流程
5.failed: 如果在編譯和輸出的流程中遇到異常而導(dǎo)致webpack退出,就會直接跳到該事件刻盐,插件可以在該事件中獲取具體的錯誤原因掏膏。