webpack面試題（轉載）

1：webpack打包原理

   把全部依賴打包成一個bundle.js文件，經過代碼分割成單元片斷並按需加載。

2：webpack的優點

（1）       webpack是以commonJS的形式來書寫腳本的，但對AMD/CMD的支持也很全面，方便舊項目進行代碼遷移。

（2）       能被模塊化的不單單是JS了

（3）       開發便捷，能替代部分grunt/gulp的工做，好比打包、壓縮混淆、圖片轉base64等。

（4）       擴展性強，插件機制完善。

3：什麼是loader，什麼是plugin

  Loader用於加載某些資源文件。由於webpack自己只能打包common.js規範的js文件，對於其餘資源如css、img等，是沒有辦法加載的，這時就須要對應的               loader將資源轉化，從而進行加載。

    Plugin用於擴展webpack的功能。不一樣於loader，plugin的功能更加豐富，好比壓縮打包，優化，不僅侷限於資源的加載。

4：什麼是bundle，什麼是chunk，什麼是module

    Bundle：是由webpack打包出來的文件

    Chunk：是指webpack在進行模塊依賴分析的時候，代碼分割出來的代碼塊

    Module：是開發中單個模塊。

5：webpack和gulp的區別？

    Webpack是一個模塊打包器，強調的是一個前端模塊化方案，更側重模塊打包，咱們能夠把開發中的全部資源都當作是模塊，經過loader和plugin對資源進行處理。

    Gulp是一個前端自動化構建工具，強調的是前端開發的工做流程，能夠經過配置一系列的task，第一task處理的事情（如代碼壓縮，合併，編譯以及瀏覽器實時更       新等）。而後定義這些執行順序，來讓gulp執行這些task，從而構建項目的整個流程。自動化構建工具並不能把全部的模塊打包到一塊兒，也不能構建不一樣模塊之間的     依賴關係。

6：如何自動生成webpack配置文件？

   Webpack-cli

7：什麼是模塊更新？有什麼優勢？

  模塊熱更新是webpack的一個功能，它可使得代碼修改以後，不用刷新瀏覽器就能夠更新。在應用過程當中替換添加刪除模塊，無需重新加載整個頁面，是高級版的自動刷新瀏覽器。

  優勢：只更新變動內容，以節省寶貴的開發時間。調整樣式更加快速，幾乎至關於在瀏覽器中更改樣式。

8：webpack-dev-server和http服務器的區別

  Webpack-dev-server使用內存來存儲webpack開發環境下的打包文件，而且可使用模塊熱更新，比傳統的http服務對開發更加有效。

9：什麼是長緩存？在webpack中如何作到長緩存優化？

  瀏覽器在用戶訪問頁面的時候，爲了加快加載速度，會對用戶訪問的靜態資源進行存儲，可是每一次代碼升級或者更新，都須要瀏覽器去下載新的代碼，最方便和最簡單的更新方式就是引入新的文件名稱。

  在webpack中，能夠在output給出輸出的文件制定chunkhash，而且分離常常更新的代碼和框架代碼，經過NameModulesPlugin或者HashModulesPlugin市再次打包文件名不變。

  10：什麼是Tree-sharking？

  Tree-sharking是指在打包中去除那些引入了，可是代碼中沒有被用到的那些死代碼。

 

參考連接：https://www.jianshu.com/p/b17bf7b818ce