一、webpack的構成

1. entry  代表專案的入口
2. module  開發中，每一個檔案可以看作一個module 
3. chunk  程式碼塊
4. loader  模組轉化器
5. plugin  擴充套件外掛，自定義webpack打包過程
6. bundle  最終打包完成的檔案

二、webpack執行的流程

1. 引數初始化。根據配置檔案webpack.config.js和shell語句中讀取與合併引數
2. 開始編譯。初始化一個compiler物件，載入所有外掛，執行物件的run()方法開始編譯。
3. 確定入口檔案。根據專案配置，找到所有的入口檔案。
4. 識別模組
5. 編譯模組（打包程式碼）。從入口開始，呼叫配置的loader對模組進行編譯。模組編譯完成後，得到模組被轉化後的最後內容和他們之間的依賴關係。
6. 資源輸出。根據入口檔案和模組的依賴關係 ，組成chunk檔案（一個chunk可能包含多個模組），每一個chunk會被轉化成一個單獨的檔案加入輸出列表中。
7. 輸出。根據配置的輸出引數（路徑和檔名），將輸出內容寫入檔案系統。

總結:可以簡單理解為，webpack要做的就是分析程式碼、轉換程式碼、編譯程式碼、輸出程式碼。

三、本質

webpack是一個機制，一個打包的機制。

參考：

http://imweb.io/topic/59324940b9b65af940bf58ae

https://juejin.im/entry/5b0e3eba5188251534379615

https://juejin.im/post/5adab998f265da0ba5671cea

http://taobaofed.org/blog/2016/09/09/webpack-flow/

https://www.jianshu.com/p/e24ed38d89fd

https://blog.csdn.net/baozhiqiangjava/article/details/80603509

https://zhuanlan.zhihu.com/p/32093510

https://www.cnblogs.com/zhuzhenwei918/p/7265971.html

https://fengmiaosen.github.io/2017/03/21/webpack-core-code/

https://cloud.tencent.com/developer/article/1015527