1、什么是Webpack
WebPack可以看做是模塊打包機：它做的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），並將其打包為合適的格式以供瀏覽器使用。
2、為什要使用WebPack
打包：減少了http請求數量，讓頁面加載和顯示更快在開發后完成的這個合並的過程就是打包。webpack在打包過程中，會分析各個文件之間的依賴關系，然后生成一個依賴圖並用文件的形式保存下來，未來瀏覽器運行代碼的時候就可以讀取這個文件，就知道了各個代碼塊之間的關聯以及如何調用了。
打包是webpack最核心的功能，webpack其它所有的功能都是為了讓打包這個功能更好。我們從一個簡單的html頁面介紹了通過webpack對模塊進行打包，既保留了單個模塊的可維護性，又減少了頁面的http請求，減少了頁面加載時間，從而增加了頁面的顯示速度，讓整個應用的體驗更好。
另外如今的很多網頁其實可以看做是功能豐富的應用，它們擁有着復雜的JavaScript代碼和一大堆依賴包。為了簡化開發的復雜度，前端社區涌現出了很多好的實踐方法
a:模塊化，讓我們可以把復雜的程序細化為小的文件;
b:類似於TypeScript這種在JavaScript基礎上拓展的開發語言：使我們能夠實現目前版本的JavaScript不能直接使用的特性，並且之后還能轉換為JavaScript文件使瀏覽器可以識別；
c:scss，less等CSS預處理器
.........
這些改進確實大大的提高了我們的開發效率，但是利用它們開發的文件往往需要進行額外的處理才能讓瀏覽器識別,而手動處理又是非常繁瑣的，這就為WebPack類的工具的出現提供了需求。
3、WebPack和Grunt以及Gulp相比有什么特性
Gulp/Grunt是一種能夠優化前端的開發流程的工具，而WebPack是一種模塊化的解決方案，不過Webpack的優點使得Webpack可以替代Gulp/Grunt類的工具。
Grunt和Gulp的工作方式是：在一個配置文件中，指明對某些文件進行類似編譯，組合，壓縮等任務的具體步驟，這個工具之后可以自動替你完成這些任務。
Webpack的工作方式是：把你的項目當做一個整體，通過一個給定的主文件（如：index.js），Webpack將從這個文件開始找到你的項目的所有依賴文件，使用loaders處理它們，最后打包為一個瀏覽器可識別的JavaScript文件。
以gulp為代表的傳統打包最大的問題是解決不了按需打包，就更別說按需加載了，因為傳統的打包思路是遍歷源文件 => 匹配規則 => 打包/處理，也就是說只要被規則命中了，即便是程序用不到的模塊也會被無腦打包，根本原因是按需這個事無法被規則描述，只能被程序邏輯描述。
webpack的打包思路就是從程序邏輯入手：入口文件 => 分析代碼 => 找出依賴 => 打包，這樣代碼里不出現的模塊就不可能被打進包里，甚至還可以實現按需加載，這就是webpack最有價值的地方。
4、什么是vue-cli
vue-cli是vue.js的腳手架，它是一個專門為單頁面應用快速搭建繁雜的腳手架，它可以輕松的創建新的應用程序而且可用於自動生成vue和webpack的項目模板。
主要作用：目錄結構、本地調試、代碼部署、熱加載、單元測試
5、webpack與vue-cli的關系
vue-cli是基於nodejs+webpack封裝的命令行工具。你可以理解為匯集了各種命令的 bash，或者bat。
用vue-cli執行build，實際上是webpack做的。原本需要自己配置webpack的相關配置，被cli簡化了。並且按照vue的用戶習慣整理了一套構建和目錄規范。
參考鏈接：
https://www.cnblogs.com/-walker/p/6056529.html
https://refined-x.com/2017/06/16/Webpack%E6%98%AF%E7%AD%94%E6%A1%88%E5%90%97/