webpack構建流程


1 初始化參數:解析webpack配置參數,合並shell傳入和webpack.config.js文件配置的參數,形成最后的配置結果;

2 開始編譯:上一步得到的參數初始化compiler對象,注冊所有配置的插件,插件監聽webpack構建生命周期的事件節點,做出相應的反應,執行對象的 run 方法開始執行編譯;

3 確定入口:從配置的entry入口,開始解析文件構建AST語法樹,找出依賴,遞歸下去;

4 編譯模塊:遞歸中根據文件類型和loader配置,調用所有配置的loader對文件進行轉換,再找出該模塊依賴的模塊,再遞歸本步驟直到所有入口依賴的文件都經過了本步驟的處理;

5 完成模塊編譯並輸出:遞歸完事后,得到每個文件結果,包含每個模塊以及他們之間的依賴關系,根據entry或分包配置生成代碼塊chunk;

6 輸出完成:輸出所有的chunk到文件系統;

注意:在構建生命周期中有一系列插件在做合適的時機做合適事情,比如UglifyPlugin會在loader轉換遞歸完對結果使用UglifyJs壓縮覆蓋之前的結果。

 

原文:https://www.cnblogs.com/chengxs/p/11022842.html


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM