打包過程都做了什么
1沪伙、Webpack 的運(yùn)行流程是一個(gè)串行的過程喷好，從啟動(dòng)到結(jié)束會(huì)依次執(zhí)行以下流程泌类，1卧抗、初始化參數(shù)：從配置文件和 Shell 語句中讀取與合并參數(shù)藤滥，得出最終的參數(shù)；
2社裆、開始編譯：用上一步得到的參數(shù)初始化 Compiler 對(duì)象拙绊，加載所有配置的插件，執(zhí)行對(duì)象的 run 方法開始執(zhí)行編譯泳秀；
3悦析、確定入口：根據(jù)配置中的 entry 找出所有的入口文件；
4卦睹、編譯模塊：從入口文件出發(fā)逗物，調(diào)用所有配置的 Loader 對(duì)模塊進(jìn)行翻譯，再找出該模塊依賴的模塊吕嘀，再遞歸本步驟直到所有入口依賴的文件都經(jīng)過了本步驟的處理违寞；
5贞瞒、完成模塊編譯：在經(jīng)過第4步使用 Loader 翻譯完所有模塊后，得到了每個(gè)模塊被翻譯后的最終內(nèi)容以及它們之間的依賴關(guān)系趁曼；6军浆、輸出資源：根據(jù)入口和模塊之間的依賴關(guān)系，組裝成一個(gè)個(gè)包含多個(gè)模塊的 Chunk挡闰，再把每個(gè) Chunk 轉(zhuǎn)換成一個(gè)單獨(dú)的文件加入到輸出列表乒融，這步是可以修改輸出內(nèi)容的最后機(jī)會(huì)；
7尿这、輸出完成：在確定好輸出內(nèi)容后簇抵，根據(jù)配置確定輸出的路徑和文件名，把文件內(nèi)容寫入到文件系統(tǒng)射众。在以上過程中碟摆，Webpack 會(huì)在特定的時(shí)間點(diǎn)廣播出特定的事件，插件在監(jiān)聽到感興趣的事件后會(huì)執(zhí)行特定的邏輯叨橱，并且插件可以調(diào)用 Webpack 提供的 API 改變 Webpack 的運(yùn)行結(jié)果典蜕。
plugin
1、Webpack 通過 Plugin 機(jī)制讓其更加靈活罗洗，以適應(yīng)各種應(yīng)用場(chǎng)景愉舔。在 Webpack 運(yùn)行的生命周期中會(huì)廣播出許多事件，Plugin 可以監(jiān)聽這些事件伙菜，在合適的時(shí)機(jī)通過 Webpack 提供的 API 改變輸出結(jié)果轩缤。
2、Webpack 啟動(dòng)后贩绕，在讀取配置的過程中會(huì)先執(zhí)行 new BasicPlugin(options) 初始化一個(gè) BasicPlugin 獲得其實(shí)例火的。在初始化 compiler 對(duì)象后，再調(diào)用 basicPlugin.apply(compiler) 給插件實(shí)例傳入 compiler 對(duì)象淑倾。插件實(shí)例在獲取到 compiler 對(duì)象后馏鹤，就可以通過 compiler.plugin(事件名稱, 回調(diào)函數(shù)) 監(jiān)聽到 Webpack 廣播出來的事件。并且可以通過 compiler 對(duì)象去操作 Webpack娇哆。3湃累、在開發(fā) Plugin 時(shí)最常用的兩個(gè)對(duì)象就是 Compiler 和 Compilation，它們是 Plugin 和 Webpack 之間的橋梁碍讨。Compiler 和 Compilation 的含義如下：Compiler 對(duì)象包含了 Webpack 環(huán)境所有的的配置信息治力，包含 options，loaders垄开，plugins 這些信息琴许，這個(gè)對(duì)象在 Webpack 啟動(dòng)時(shí)候被實(shí)例化，它是全局唯一的溉躲，可以簡(jiǎn)單地把它理解為 Webpack 實(shí)例榜田；Compilation 對(duì)象包含了當(dāng)前的模塊資源、編譯生成資源锻梳、變化的文件等箭券。當(dāng) Webpack 以開發(fā)模式運(yùn)行時(shí)，每當(dāng)檢測(cè)到一個(gè)文件變化疑枯，一次新的 Compilation 將被創(chuàng)建辩块。Compilation 對(duì)象也提供了很多事件回調(diào)供插件做擴(kuò)展。通過 Compilation 也能讀取到 Compiler 對(duì)象荆永。
4废亭、Compiler 和 Compilation 的區(qū)別在于：Compiler 代表了整個(gè) Webpack 從啟動(dòng)到關(guān)閉的生命周期，而 Compilation 只是代表了一次新的編譯具钥。
5豆村、開發(fā)插件時(shí)需要注意：只要能拿到 Compiler 或 Compilation 對(duì)象，就能廣播出新的事件骂删，所以在新開發(fā)的插件中也能廣播出事件掌动，給其它插件監(jiān)聽使用、傳給每個(gè)插件的 Compiler 和 Compilation 對(duì)象都是同一個(gè)引用宁玫。粗恢。也就是說在一個(gè)插件中修改了 Compiler 或 Compilation 對(duì)象上的屬性，會(huì)影響到后面的插件欧瘪、有些事件是異步的眷射，這些異步的事件會(huì)附帶兩個(gè)參數(shù)，第二個(gè)參數(shù)為回調(diào)函數(shù)佛掖，在插件處理完任務(wù)時(shí)需要調(diào)用回調(diào)函數(shù)通知 Webpack妖碉，才會(huì)進(jìn)入下一處理流程。
