1：什麼是webpack和grunt和gulp有什麼不同
答案：Webpack是一個模塊打包器，他可以遞歸的打包項目中的所有模塊，最終生成幾個打包後的文件。他和其他的工具最大的不同在於他支持code-splitting、模塊化(AMD，ESM，CommonJs)、全局分析。
2：什麼是bundle,什麼是chunk，什麼是module?
答案：bundle是由webpack打包出來的文件，chunk是指webpack在進行模塊的依賴分析的時候，代碼分割出來的代碼塊。module是開發中的單個模塊。
3：什麼是Loader?什麼是Plugin?
答案：
1）Loaders是用來告訴webpack如何轉化處理某一類型的文件，並且引入到打包出的文件中
2）Plugin是用來自定義webpack打包過程的方式，一個插件是含有apply方法的一個對象，通過這個方法可以參與到整個webpack打包的各個流程(生命週期)。
4:如何可以自動生成webpack配置？
答案： webpack-cli /vue-cli /etc …腳手架工具
5：webpack-dev-server和http服務器如nginx有什麼區別?
答案：webpack-dev-server使用內存來存儲webpack開發環境下的打包文件，並且可以使用模塊熱更新，他比傳統的http服務對開發更加簡單高效。
6:什麼 是模塊熱更新？
答案:模塊熱更新是webpack的一個功能，他可以使得代碼修改過後不用刷新瀏覽器就可以更新，是高級版的自動刷新瀏覽器。
7：什麼是長緩存？在webpack中如何做到長緩存優化？
答案：瀏覽器在用戶訪問頁面的時候，爲了加快加載速度，會對用戶訪問的靜態資源進行存儲，但是每一次代碼升級或是更新，都需要瀏覽器去下載新的代碼，最方便和簡單的更新方式就是引入新的文件名稱。在webpack中可以在output縱輸出的文件指定chunkhash,並且分離經常更新的代碼和框架代碼。通過NameModulesPlugin或是HashedModuleIdsPlugin使再次打包文件名不變。
8：什麼是Tree-shaking?CSS可以Tree-shaking嗎?
答案：Tree-shaking是指在打包中去除那些引入了，但是在代碼中沒有被用到的那些死代碼。在webpack中Tree-shaking是通過uglifyJSPlugin來Tree-shaking
JS。Css需要使用Purify-CSS。
作者：前端攻城小牛
鏈接：https://www.jianshu.com/p/06c6614001be
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯繫作者獲得授權並註明出處。