webpack 源碼解讀(1)--源碼結構

最近一直在趕項目進度，沒有時間好好地做下總結。所以就開了個專欄，準備整理下最近的心得和收穫。

開始的第一個系列，因為最近項目中與這塊打交道較多，所以準備寫下webpack的相關內容。

首先，既然是源碼解讀，當然少不了具體的源碼模塊結構，不過這張結構圖，只提取了相對比較重要的功能模塊，實體和依賴。

在後面的篇章我會對其中的一些打交道比較多的模塊進行具體的介紹，這裡從這張圖的大小可以看出其中最核心的還是Compiler和Compilation這兩個文件，主要的流程還是在這兩個文件裡面進行的。

其次，webpack的編譯流程中的所有插件都是基於tapable（一個用於事件發布訂閱執行的插件架構）來進行的，這裡吐槽下學習webpack源碼時候如果是運行代碼進行調試真的是麻煩，會在文件之間跳來跳去，很不利於調試看結果。

當然麻煩歸麻煩，webpack這種插件機制還是有很多可取的地方，這種利用事件訂閱發布進行流程式控制制和插件開發的方式，大大減少了代碼之間的耦合性，一個文件專註於做自己的事情就好了。同時我們自己開發插件時，只要訂閱webpack打包過程中對應的聲明周期事件，就能很方便的進行插件擴展。

第一篇就簡單開個頭吧，第二篇起，我會從Compiler.js這個文件開始，深入到webpack打包流程的源碼中。