一、概念：

概念問(wèn)題一、什么是webpack和grunt和gulp有什么不同 ？

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

概念問(wèn)題二、什么是bundle，什么是chunk，什么是module？

答案：bundle是由webapck最終打包出來(lái)的文件，chunk（webpack打包過(guò)程中）是指webpack在進(jìn)行模塊的額依賴分析的時(shí)候，代碼分割出來(lái)的代碼塊。module是開發(fā)中的單個(gè)模塊。

概念問(wèn)題三、什么是Loader？什么是Plugin？

答案：Loaders是用來(lái)告訴webpack如何轉(zhuǎn)化處理某一類型的文件，并且引入到打包出的文件中。
Plugin是用來(lái)自定義webpack打包過(guò)程的的方式，一個(gè)插件是含有apply方法的一個(gè)對(duì)象，通過(guò)這個(gè)方法可以參與到整個(gè)webapck打包的各個(gè)流程（生命周期）。

二、配置：

配置問(wèn)題：如何可以自動(dòng)生成webpack配置？

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

三、開發(fā)：

開發(fā)問(wèn)題一、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)單高效。 就是express

開發(fā)問(wèn)題二、什么是模塊熱更新？

答案：模塊熱更新是webpack的一個(gè)功能，他可以使得代碼修改過(guò)后不用刷新瀏覽器就可以更新，是高級(jí)版的自動(dòng)刷新瀏覽器。是通過(guò)websocket通道做到的。就是將修改的這部分代碼從新執(zhí)行一邊，而不是重新刷新瀏覽器。

四、優(yōu)化：

優(yōu)化問(wèn)題一、什么是長(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ò)NamedModulesPlugin或是HashedModuleIdsPlugin使再次打包文件名不變。

優(yōu)化問(wèn)題二、什么是Tree-shaking?CSS可以Tree-shaking嗎？

答案：Tree-shaking是指在打包中去除那些引入了，但是在代碼中沒(méi)有別用到的那些死代碼、在webpack中Tree-shaking是通過(guò)uglifyJSPlugin來(lái)Tree-shaking JS.CSS需要使用Purify-CSS