前端面試之webpack面試常見問題

概念問題一：什麼是webpack和grunt和gulp有什麼不一樣

答案：Webpack是一個模塊打包器，他能夠遞歸的打包項目中的全部模塊，最終生成幾個打包後的文件。他和其餘的工具最大的不一樣在於他支持code-splitting、模塊化(AMD，ESM，CommonJs)、全局分析。

概念問題二：什麼是bundle,什麼是chunk，什麼是module?

答案：bundle是由webpack打包出來的文件，chunk是指webpack在進行模塊的依賴分析的時候，代碼分割出來的代碼塊。module是開發中的單個模塊。

概念問題三：什麼是Loader?什麼是Plugin?

答案：
1）Loaders是用來告訴webpack如何轉化處理某一類型的文件，而且引入到打包出的文件中
2）Plugin是用來自定義webpack打包過程的方式，一個插件是含有apply方法的一個對象，經過這個方法能夠參與到整個webpack打包的各個流程(生命週期)。

配置問題:如何能夠自動生成webpack配置？

答案： webpack-cli /vue-cli /etc ...腳手架工具

開發問題一：webpack-dev-server和http服務器如nginx有什麼區別?

答案：webpack-dev-server使用內存來存儲webpack開發環境下的打包文件，而且能夠使用模塊熱更新，他比傳統的http服務對開發更加簡單高效。

開發問題二:什麼 是模塊熱更新？

答案:模塊熱更新是webpack的一個功能，他能夠使得代碼修改事後不用刷新瀏覽器就能夠更新，是高級版的自動刷新瀏覽器。

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

答案：瀏覽器在用戶訪問頁面的時候，爲了加快加載速度，會對用戶訪問的靜態資源進行存儲，可是每一次代碼升級或是更新，都須要瀏覽器去下載新的代碼，最方便和簡單的更新方式就是引入新的文件名稱。在webpack中能夠在output縱輸出的文件指定chunkhash,而且分離常常更新的代碼和框架代碼。經過NameModulesPlugin或是HashedModuleIdsPlugin使再次打包文件名不變。

優化問題二：什麼是Tree-shaking?CSS能夠Tree-shaking嗎

答案：Tree-shaking是指在打包中去除那些引入了，可是在代碼中沒有被用到的那些死代碼。在webpack中Tree-shaking是經過uglifySPlugin來Tree-shaking
JS。Css須要使用Purify-CSS。

願你成爲終身學習者