自從接觸了react，vue 這兩個框架，都會用到webpack這個打包工具。面試的時候，經常被問到知道webpack的編譯原理嗎？ 可以簡單的介紹一下。每每這個時候都被問的啞口無言，平時用的時候挺順手，真正說點之乎者也出來，還是有點難度的。
一、 webpack 的作用
總結為一下三點：
1、依賴管理：方便引用第三方模塊、讓模塊更容易復用，避免全局注入導致的沖突、避免重復加載或者加載不需要的模塊。會一層一層的讀取依賴的模塊，添加不同的入口；同時，不會重復打包依賴的模塊。
2、合並代碼：把各個分散的模塊集中打包成大文件，減少HTTP的請求鏈接數，配合UglifyJS（壓縮代碼）可以減少、優化代碼的體積。
3、各路插件：統一處理引入的插件，babel編譯ES6文件，TypeScript,eslint 可以檢查編譯期的錯誤。
一句話總結：webpack 的作用就是處理依賴，模塊化，打包壓縮文件，管理插件。
二、webpack 的原理
一切皆為模塊，由於webpack只支持js文件，所以需要用loader 轉換為webpack支持的模塊，其中plugin 用於擴張webpack 的功能，在webpack構建生命周期的過程中，在合適的時機做了合適的事情。
webpack怎么工作的過程：
1、解析配置參數，合並從shell(npm install 類似的命令)和webpack.config.js文件的配置信息，輸出最終的配置信息；
2、注冊配置中的插件，好讓插件監聽webpack構建生命周期中的事件節點，做出對應的反應；
3、解析配置文件中的entry入口文件，並找出每個文件依賴的文件，遞歸下去；
4、在遞歸每個文件的過程中，根據文件類型和配置文件中的loader找出對應的loader對文件進行轉換；
5、遞歸結束后得到每個文件最終的結果，根據entry 配置生成代碼chunk(打包之后的名字)；
6、輸出所以chunk 到文件系統。