1.什么是webpack
官方解釋：webpack是一個現代的JavaScript應用的靜態模塊打包工具
總體來說就是模塊和打包，
通過ts、ES6等開發的應用不能直接放到服務器，因為瀏覽器不解析，那么就可以通過webpack轉化生成瀏覽器可以識別並執行的代碼。
目前市場上的打包工具：rollup、webpack、gulp/grunt
2、模塊化和打包
現在前端模塊化開發的一些方案：AMD、CMD、CommonJS、ES6，瀏覽器只解析ES6，用其他方案瀏覽器不能解析就需要通過webpack，webpack支持模塊化就可以處理模塊間的各種依賴，並且將其整合打包。不僅是JavaScript文件可以打包，CSS、圖片、json文件等都可以在webpack中當做模塊來用。
打包就是將webpack中各種資源模塊進行打包合並成一個或者多個包，並且在打包過程中還能進行壓縮。
3、grunt/gulp和webpack的區別
gulp：核心是task，配置一系列的task，並且定義task要處理的事務，讓整個流程自動化，也被稱為前端自動化任務管理工具，對於gulp來說模塊化不是核心
webpack：更強調模塊化開發管理
4、webpack和node.js和npm的關系
webpack為了正常運行必須依賴node環境，Node環境為了正常執行很多代碼，必須依賴很多包，npm（node packages manager）工具是為了管理Node的包。
5、安裝webpack
首先要安裝Node.is，安裝Nod.js版本要大於8.9
可以根據下面命令查看自己的node版本：
全局安裝webpack（我跟老師安裝的3.6.0，因為學習的Vue CLI2依賴該版本）,命令如下：
npm install webpack@3.6.0 -g
局部安裝（后續項目需要），命令如下：
（開發依賴，項目打包后不需要繼續使用）
6、使用webpack
在js中使用了CommonJS（或者其他模塊化方案）可以利用上述命令，將src下的main.js（你寫的js文件）打包到dist文件夾下bundel.js（webpack生成的文件），再將bundel.js引用到html中，瀏覽器就可以解析你的模塊化語句啦。
可是，上面的命令太長了，只想寫webpack就讓他替我完成打包，該怎么辦呢？
你需要創建一個名叫webpack.config.js（目前名字是固定的，不可以隨意修改）的文件，告訴webpack你導入的入口在哪里，你導出的出口在哪里。但是出口路徑是要動態獲取到的，需要用到node的包。需要做如下操作：
用上面的指令來初始化，之后需要輸入名字后一直回車，如下圖：
最后‘yes’回車之后生成package.json，文件內容如下：
如果package.json有依賴，就需要npm install命令加載
現在來配置webpack.config.js，如下圖：
現在我們直接輸入webpack命令就可以進行打包啦
但在開發中，並不會用webpack命令，而是用 npm run build,那如何將webpack命令和npm run build命令對應呢？
打開package.js，在script中映射，如下圖所示：
這樣，我們在打包是就可以直接寫npm run build了，在控制台輸入npm run build相當於運行上面的webpack。但是這樣的話，在運行時會優先在本地找webpack，就需要用到上面說到的局部安裝webpack，開發時依賴本地webpack，在package.js中，也會出現"devDependencies"：
這時，你用webpack命令打包用全局的webpack，用npm run build打包用的本地的webpack。如果沒有在腳本中定義build，那你本地打包時需要先去node_modules/bin路徑，是一件很麻煩的事，這也是定義build的好處。