第一題：談談你對webpack的理解？

　　webpack是一個打包模組化js的工具，在webpack裡一切檔案皆模組，通過loader轉換檔案，通過plugin注入鉤子，最後輸出由多個模組組合成的檔案，webpack專注構建模組化專案。WebPack可以看做是模組的打包機器：它做的事情是，分析你的專案結構，找到js模　　　　塊以及其它的一些瀏覽器不能直接執行的拓展語言，例如：Scss，TS等，並將其打包為合適的格式以供瀏覽器使用。

第二題：說說webpack與grunt、gulp的不同？

三者都是前端構建工具，grunt和gulp在早期比較流行，現在webpack相對來說比較主流，不過一些輕量化的任務還是會用gulp來處理，比如單獨打包CSS檔案等。

grunt和gulp是基於任務和流（Task、Stream）的。類似jQuery，找到一個（或一類）檔案，對其做一系列鏈式操作，更新流上的資料， 整條鏈式操作構成了一個任務，多個任務就構成了整個web的構建流程。

webpack是基於入口的。webpack會自動地遞迴解析入口所需要載入的所有資原始檔，然後用不同的Loader來處理不同的檔案，用Plugin來擴充套件webpack功能。

所以，從構建思路來說，gulp和grunt需要開發者將整個前端構建過程拆分成多個`Task`，併合理控制所有`Task`的呼叫關係；webpack需要開發者找到入口，並需要清楚對於不同的資源應該使用什麼Loader做何種解析和加工

對於知識背景來說，gulp更像後端開發者的思路，需要對於整個流程瞭如指掌 webpack更傾向於前端開發者的思路

第三題：什麼是bundle,什麼是chunk，什麼是module?

bundle：是由webpack打包出來的檔案

chunk：程式碼塊，一個chunk由多個模組組合而成，用於程式碼的合併和分割

module：是開發中的單個模組，在webpack的世界，一切皆模組，一個模組對應一個檔案，webpack會從配置的entry中遞迴開始找出所有依賴的模組

第四題：什麼是Loader?什麼是Plugin?

1）Loaders是用來告訴webpack如何轉化處理某一型別的檔案，並且引入到打包出的檔案中

2）Plugin是用來自定義webpack打包過程的方式，一個外掛是含有apply方法的一個物件，通過這個方法可以參與到整個webpack打包的各個流程(生命週期)。

第五題：有哪些常見的Loader？他們是解決什麼問題的？

file-loader：把檔案輸出到一個資料夾中，在程式碼中通過相對 URL 去引用輸出的檔案

url-loader：和 file-loader 類似，但是能在檔案很小的情況下以 base64 的方式把檔案內容注入到程式碼中去

source-map-loader：載入額外的 Source Map 檔案，以方便斷點除錯

image-loader：載入並且壓縮圖片檔案

babel-loader：把 ES6 轉換成 ES5

css-loader：載入 CSS，支援模組化、壓縮、檔案匯入等特性

style-loader：把 CSS 程式碼注入到 JavaScript 中，通過 DOM 操作去載入 CSS。

eslint-loader：通過 ESLint 檢查 JavaScript 程式碼