轉載於：https://segmentfault.com/a/1190000014148611?utm_source=tag-newest
概念問題一：什麼是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
原文出處：https://www.cnblogs.com/gaoyafeng/p/11985360.html