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的功能更加豐富，好比壓縮打包，優化，不僅侷限於資源的加載。

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處理的事情（如代碼壓縮，合併，編譯以及瀏覽器實時更新等）。而後定義這些執行順序，來讓glup執行這些task，從而構建項目的整個開發流程。自動化構建工具並不能把全部的模塊打包到一塊兒，也不能構建不一樣模塊之間的依賴關係。 

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

webpack-cli/vue-vli

7.什麼是模熱更新？有什麼優勢？

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

優勢：只更新變動內容，以節省寶貴的開發時間。調整樣式更加快速，幾乎至關於在瀏覽器中更改樣式 8.webpack-dev-server 和 http服務器的區別 webpack-dev-server使用內存來存儲webpack開發環境下的打包文件，而且可使用模塊熱更新，比傳統的http服務對開發更加有效。

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

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

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

10.什麼是Tree-sharking?

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