前端之webpack面試中遇到的常見問(wèn)題

1:什么是webpack和grunt和gulp有什么不同

答案:Webpack是一個(gè)模塊打包器,他可以遞歸的打包項(xiàng)目中的所有模塊,最終生成幾個(gè)打包后的文件。他和其他的工具最大的不同在于他支持code-splitting、模塊化(AMD,ESM,CommonJs)、全局分析。

2:什么是bundle,什么是chunk,什么是module?

答案:bundle是由webpack打包出來(lái)的文件,chunk是指webpack在進(jìn)行模塊的依賴分析的時(shí)候,代碼分割出來(lái)的代碼塊。module是開發(fā)中的單個(gè)模塊。

3:什么是Loader?什么是Plugin?

答案:

1)Loaders是用來(lái)告訴webpack如何轉(zhuǎn)化處理某一類型的文件,并且引入到打包出的文件中

2)Plugin是用來(lái)自定義webpack打包過(guò)程的方式,一個(gè)插件是含有apply方法的一個(gè)對(duì)象,通過(guò)這個(gè)方法可以參與到整個(gè)webpack打包的各個(gè)流程(生命周期)。

4:如何可以自動(dòng)生成webpack配置?

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

5:webpack-dev-server和http服務(wù)器如nginx有什么區(qū)別?

答案:webpack-dev-server使用內(nèi)存來(lái)存儲(chǔ)webpack開發(fā)環(huán)境下的打包文件,并且可以使用模塊熱更新,他比傳統(tǒng)的http服務(wù)對(duì)開發(fā)更加簡(jiǎn)單高效。

6:什么 是模塊熱更新?

答案:模塊熱更新是webpack的一個(gè)功能,他可以使得代碼修改過(guò)后不用刷新瀏覽器就可以更新,是高級(jí)版的自動(dòng)刷新瀏覽器。

7:什么是長(zhǎng)緩存?在webpack中如何做到長(zhǎng)緩存優(yōu)化?

答案:瀏覽器在用戶訪問(wèn)頁(yè)面的時(shí)候,為了加快加載速度,會(huì)對(duì)用戶訪問(wèn)的靜態(tài)資源進(jìn)行存儲(chǔ),但是每一次代碼升級(jí)或是更新,都需要瀏覽器去下載新的代碼,最方便和簡(jiǎn)單的更新方式就是引入新的文件名稱。在webpack中可以在output縱輸出的文件指定chunkhash,并且分離經(jīng)常更新的代碼和框架代碼。通過(guò)NameModulesPlugin或是HashedModuleIdsPlugin使再次打包文件名不變。

8:什么是Tree-shaking?CSS可以Tree-shaking嗎?

答案:Tree-shaking是指在打包中去除那些引入了,但是在代碼中沒(méi)有被用到的那些死代碼。在webpack中Tree-shaking是通過(guò)uglifySPlugin來(lái)Tree-shaking

JS。Css需要使用Purify-CSS。

“相信有很多想學(xué)前端的小伙伴,今年年初我花了一個(gè)月整理了一份最適合2018年學(xué)習(xí)的web前端干貨,從最基礎(chǔ)的HTML+CSS+JS到移動(dòng)端HTML5到各種框架都有整理,送給每一位前端小伙伴,53763,1707這里是小白聚集地,歡迎初學(xué)和進(jìn)階中的小伙伴?!?/p>

最后:祝大家早日學(xué)有所成,拿到滿意offer,快速升職加薪,走上人生巔峰。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容