1.為什么要使用webpack：
因為我們想把資源整合。如在項目index.html文件中為了請求變得更少我們可以新建一個叫main.js的項目入口文件（里面又引用其它的各種資源，而index.html里引用它就可以了），但main.js里可能有些語法太高級了或引入了其它js文件，所以會報錯。這時候我們就可以使用weboack來處理main.js了（前提已全局安裝了webpack。全局安裝：npm i webpack）。
2. webpack處理main.js正常運行項目：
2.1 處理main.js：可以使用 webpack .\src\main.js .\dist\bundle.js （意思是處理main.js文件處理好了之后把它打包為bundle.js，此時index.html引用 .\dist\bundle.js 就可以了，如果根目錄里沒有dist文件將會自動生成）這樣我們就可以每次修改一下main.js文件就執行一下 webpack .\src\main.js .\dist\bundle.js （重新處理main.js並重新打包為bundle.js ）然后我們再刷新一下瀏覽器，不過這樣太麻煩了。
2.2 簡約方式處理main.js（目標：我們修改完main.js之后終端執行一下webpack就自動處理並打包）：這時我們需要在當前目錄（一般是根目錄）下新建一個webpack.config.js文件再里面配置需處理的文件路徑及處理好之后打包的文件路徑：
現在我們修改完main.js保存之后終端執行webpack再刷新一下瀏覽器即可看到效果
2.3 更簡約方式處理main.js（目標：我們修改完main.js之后它自動處理並打包並自動刷新一下瀏覽器）：這時候webpack已經不能滿足我們的需求了，我們需要安裝一個 webpack-dev-server 的包（它類似於node中的nodemon。安裝：npm i webpack-dev-server -D 安裝至項目的本地，但它依賴於項目本地webpack，所以哪怕你全局安裝webpack，還需要項目本地再安裝一次。安裝：npm i webpack -D）。
但是現在在終端輸入 webpack-dev-server 還是會報錯因為此工具包不會全局安裝的，無法當成腳本命令運行。所以我們需要在package.json文件script腳本里配置一下：
現在我們在終端執行 npm run dev 即可開始自動處理main.js並打包。打包完成后將返回一個根路徑端口號（此時終端並不會結束運行依舊在監聽代碼的修改然后自動編譯，但頁面並不會更新），根路徑后面其實會有一個打包之后的端口名（也叫bundle.js，但是看不見）/bundle.js 。注意這個叫 /bundle.js 的端口號不是磁盤目錄下的 ./dist/bundle.js 文件，它是直接放在了內存中，所以運行將會更快，所以此時磁盤目錄下的 /dist/bundle.js 文件只用來中間過渡了，因此我們在index.html里應該直接引用 /bundle.js （<script src="bundle.js"> </script>）。
現在我們執行一次 npm run dev 再點擊返回的根路徑端口號之后（打開根路徑端口號之后進入根目錄需手動點一下src目錄）再修改完main.js將會自動處理並打包且刷新瀏覽器
3. webpack-dev-server常用命令參數（可以package.json里配置也可在webpack.config.js里配置推薦第一種）：
--open ：自動打開瀏覽器
--port 3000 ：設置打開瀏覽器端口號為3000
--contentBase src ：設置打開瀏覽器之后展示的內容為src（默認是根目錄要自己點一下src）
--hot ：局部更新（不再修改一下整體重新處理再生成一個新的包）
3.1 package.json配置：
3.2 webpack.config.js里配置：
4. 將磁盤中的index.html頁面也變成時內存中的：
4.1：我們需要借助 html-webpack-plugin 這個包來實現（下載：npm i html-webpack-plugin -D）。
4.2：下載好包之后在webpack.config.js里引入並配置
4.2.1：引入：const htmlwebpackplugin = require('html-webpack-plugin)
4.2.2：配置：
至此磁盤中的index.html頁面將會拷貝一份為內存中的index.html頁面（同樣我們還是看不見），注意此時內存的index.html頁面和磁盤中的一模一樣，但在最下面會自動多引入一個bundle.js打包好的入口文件(<script src="/bundle.js"> </script>)，所以我們完全可以把磁盤中的index.html頁面里這行代碼刪除（這樣我們看起來什么都沒有引入了）。並且這個時候我們可以直接訪問3000端口了，因為內存了也有一個首頁了，--contentBase src可以刪除了。（以后不用webpack引包，可以從/node_modules進去了，因為這樣打開的就是根目錄了，node_modules就是在根目錄下的）。
5. webpack處理其它類型文件（webpack默認只處理js文件）：
想處理其它類型的文件需在main.js里引入進來后還需要安裝其它類型文件對應的loader包。
5.1 css：
首先main.js里引入（import './css/index.css' 這里直接引入文件路徑即可，因為它不需要暴露里面的成員，把整個拿來用就可以了，除非還有 css.xx，一般js文件才 import xx from xx），然后下載相應的loader包）(處理sass時除了下載它的loader包還要把sass本身下載一下 npm inode-sass-D；less也是一樣還需下載 npm i less -D）：
然后在webpack.config.js里配置（注意webpack引用各種loader時是在配置里從后往前引用）：
5.2 url地址：
5.2.1 url圖片 ：假如我們在css文件里通過background: url('./xx/xx.jog')，這時候webpack肯定處理不了的，一樣的需要下載對應的loader再配置。
下載：npm i url-loader file-loader -D
配置：
limit是圖片的大小尺寸，[hash: 8 ]- 是在圖片前面加8位嘻哈，防止圖片名字一樣時后者會代替前者（最高32位，圖片默認是base64編碼），[name].[ext]是讓圖片名字和格式都是自己原本的不是默認的base64編碼。
5.2.2 字體文件：比如我們 npm i bootstrp -S 下載好bootstrap后在main.js里引入一下 （通過路徑引入node_modules里的文件node_modules可以省略不寫）。配置：
6. webpack中將高級語法轉為低級語法（默認支持部分ES6語法，需下載兩套包來實現）：
7. webpack中使用vue（index里有一個容器接收main.js文件中vm實例里el的指向即可，因為此時我們的index已運行在內存中，它自動多加了一個引入打包好的bundle.js文件）：
在main.js里 import Vue from 'vue' 時得到的是不完整的vue（可以根據查找規則最終找到main發現指向的是vue.runtime.common.js）。這時要么我們手動修改main里的指向為vue.js，要么在main.js里 import Vue from '../node_modules/xx/vue.js'，要么在webpack.config.js 里加一個配置（讓main發現是以vue結尾的文件時指向vue.js）：
8. webpack中使用vue組件（一般我們喜歡把組件都放在一個vue文件里，所以首先要有一個解析vue文件的loader）：
這時就可以正常的引入vue文件里的組件了。如果引入的vue是不完整的，這是還想使用組件的方式如下：
