目的：瞭解輸入打包命令後發生了什麼事情

本質：Node去運行一個js文件，這個js文件做的事情就是鋪墊好流程，接着啓動打包流程。

首先我們先來了解一下這個js文件到底有什麼東西，再來引出概念。

我把這個文件形容為一個車間，那麼車間最重要的是什麼呢，最重要的是要有機牀。
這個機牀在webpack構建中稱之為Compiler。它是一個編譯類。

那麼這個機牀要需要啓動的話要先準備什麼，需要先輸入它該怎麼運行的參數。
這個參數就是我們編寫的webpack.config.js配置文件。也還需要其他shell配置。

輸入完參數，接着我們需要在機牀上安裝一些機械手去控制零件變化，這些機械手就是它的插件。稱為Plugin。

加載完插件後，機牀（編譯器Compiler）就可以開始工作了。

這個在webpack整個核心的打包核心階段稱之為初始化階段。
即
1.創建編譯器對象(new Compiler());
2.初始化參數(options);
3.初始化編譯環境(加載插件Plugin);**
4.開始編譯(compilere.run);**

那這個編譯器怎麼工作的。

首先這個車牀它之前已經準備好了參數和設備，那麼現在就該有某個東西推着這些零件往前走，這個東西就是滾動帶。在webpack裏面叫Compilation。它代表了單次構建過程。由它來推動着打包過程。

它是如何推動這個過程呢？

首先我們需要確定好入口處在哪裏，然後從這裏開始加載，目標就是生成一個入口模塊對象。

在生成模塊過程中需要將有些零件轉換成可加工的形式，由於在webpack只能識別js文件，所以我們在構建過程中把其他資源文件例如css,sass,png等格式的文件進行處理轉換成可加工的形式。這個過程需要用到的就是Loader（加載器）。Loader能將這些資源文件進行處理解析，成為可被進行處理的形式。這些加載器是從哪裏來的呢，就是我們在一開始初始化參數時定義的。Compilation會從編譯器那邊拿到這些loader的信息進行處理最後將模塊轉義成標準的js內容。

接着這些零件可以處理了，但是雜亂無章的零件讓機器不好處理，我們需要將這些零件都聯繫到一起。（即找到它們所有的依賴關係）但想要找到這個零件需要用到哪個零件進行組件都不知道從哪看起。這時我們就需要先讓零件序列化，能按圖索驥的去操作它。用到了babel/paser將它們解析成AST對象。

稍微解釋一下AST，它叫做抽象語法樹（abstract syntax code，AST）是源代碼的抽象語法結構的樹狀表示。簡而言之，它可以表示源代碼中的每一個結構。
例如：

有了Ast對象，現在就可以獲取這個模塊對應的依賴。

怎麼獲取這個模塊對應的依賴呢？

babel/traverse這個工具可以通過import/require語句來進行判斷。這時找到入口文件所需要的依賴之後注入到依賴數組中，生成一個含有文件名，ast對象，依賴數組的入口模塊。
接着在重複上述步驟遞歸去找到入口模塊下的依賴對應的依賴。這時將所有的零件都聯繫起來。

展開説一下找尋依賴關係的步驟，假如入口文件的依賴關係如下：

經過加工後形成入口模塊流程如下：

這時compliation會依次去遍歷這兩個依賴文件，生成對應的模板：

由於a.js文件下仍有依賴文件，所以compliation會繼續遍歷，直到沒有新的依賴為止:

這個階段在webpack整個核心的打包核心階段稱之為構建階段。
1.編譯模塊(make)；loader解析，生成ast對象，構建入口模塊。
2.完成模塊編譯；找到入口模塊下的所有依賴關係，生成不同模塊。

此時我們把一個個零件加工好了，也把它們之間的關係標明瞭，最後就是要將它們包裝起來。這時需要用的包裝紙包裝成小成品，在webpack裏面叫做chunk。按照一定的規則分成一個個chunk，一個chunk可以包含一個模塊或者多個模塊。將一個個chunk添加到輸出列表中去。最後調用node的文件流（fs），根據配置好的出口路徑和文件名，把文件寫到文件系統中去生成一個js打包文件。

這個階段在webpack整個核心的打包核心階段稱之為生成階段。
即
1.輸入資源(seal)；根據依賴關係生成一個個chunk,添加到輸出列表。
2.寫入文件系統；根據配置出口路徑和文件名，進行寫入。

整體的文件形態流轉：

總結

webpack基本的構建流程大體上如上述所示，但是還有涉及的很多細節無法進行逐一展開，但理解了大概的流程會對webpack有一個新的認識，它之所強大是因為這條流程基本是不變的，而且拓展性強，它利用loader,plugin插件來不斷壯大它的生態，成為了前端一個不那麼容易被替代的構建工具。