使用WebpackDevServer提升開發效率
我們修改代碼，如果想在瀏覽器上正確運行，都需要手動打包npm run bundle,這樣的話我們的開發效率是非常低下的，我們希望，如果改了src下面的原代碼，那麼dist目錄就會自動打包，那麼就簡單多了，不用每次都運行npm run bundle了。
要想實現這樣的功能，有三種做法
方法一：webpack --watch
打開package.json文件，當我們運行npm run bundle的時候，實際上是在運行webpack命令，我們可以給它加一個watch
"scripts": {
"bundle": "webpack --watch"
},
然後執行npm run bundle，之後修改src下面的內容。都會自動執行npm run bundle
當加了一個watch參數的時候，是什麼意思呢？意思是webpack會幫助我們去監聽打包的文件，只要打包的文件發生變化，就會自動的重新打包。
我們想要在第一次運行npm run bundle的時候，自動幫我們實現打包並且把瀏覽器打開，同時還可以模擬一些服務器上的特性，這樣的話通過package.json配置 webpack --watch就不行了
方法二：webpack-dev-server
藉助WebpackDevServer來幫助我們實現
安裝WebpackDevServer，npm install webpack-dev-server -D
在webpack.config.js中配置devServer
devServer: {
contentBase: './dist'
},
配置一個最基礎的contentBase，意思是服務器要起在哪一個文件夾下，因爲打包生成的文件都會放在dist目錄下，所以要藉助webpack devServer幫我們起一個服務器，這個服務器的根路徑在當前目錄的dist文件下，當做了devServer的配置，再去package.json中腳本去加webpack-dev-server
"scripts": {
"bundle": "webpack --watch",
"start": "webpack-dev-server"
},
運行 npm run start
告訴我們已經幫助我們起了一個服務器叫 http://localhost:8080/，我們可以直接去訪問這個地址，顯示出我們的項目，這個時候修改index.js的內容，可以被webpack監聽到，不需要重新執行npm run start，webpack-dev-server的好處是，不僅可以監聽到文件發生改變重新幫我們打包，還會自動幫助我們重新刷新瀏覽器，所以用它可以更方便的提升代碼開發的效率。
方法三：自己做一個服務器
在devServer不成熟的時候，都是靠自己配置，（現在devServer很成熟了，可以不用靠自己配置）
在package.json中的腳本加一個名爲middleware的配置
"scripts": {
"bundle": "webpack --watch",
"start": "webpack-dev-server --host 0.0.0.0",
"middleware": "node server.js"
},
當運行npm run middleware,想自己寫一個服務器，這個服務器如果監聽到src目錄下的內容有改變，會向webpack-dev-server一樣，自動幫助我們重啓服務器，更新網頁上的內容，那麼怎麼去寫這樣一個server.js呢
首先在跟目錄創建一個server.js
要創建一個server的服務器，要在node的環境下，需要安裝express，幫助我們快速的搭建一個服務器,這個服務器要監聽webpack的變化，幫助重新打包，所以還要藉助一個webpack的中間開發件webpack-dev-middleware
1.安裝這兩個插件：npm install express webpack-dev-middleware -D
2.在webpack.config.js做配置：
output: {
publicPath: '/',
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
},
在output中加上 publicPath: '/',，表示的是所有打包生成的文件前面的引用都加一個根路徑，確認打包生成的路徑不會有問題
3.寫server.js：
首先引入express、webpack
然後起一個node的服務器，用express創建一個服務器實例，讓這個實例監聽3000端口，端口號自己來定，可以寫一個回調函數，監聽成功會執行。
4.運行`npm run middleware
我們已經在3000端口啓動一個服務器了
5. 引入webpackDevMiddleware和webpack.config.js(webpack的配置文件)和complier(webpack的編譯器)
const webpackDevMiddleware = require('webpack-dev-middleware')
const config = require('./webpack.config.js')
const comlier = webpack(config)
7.app是一個express的實例，可以使用中間件，通過use
app.use(webpackDevMiddleware(comlier), {
publicPath: config.output.publicPath
})
意思是隻要文件發生改變了，complier編譯器就會重新運行，重新運行的文件對應的打包輸出的內容publicPath就是config.output.publicPath
8.運行`npm run middleware
修改文件，可以重新打包了，但是沒有幫助我們實時刷新，事實上要自己寫一個server要花費很大的精力，推薦用devServer來實現。
補充：
1.爲什麼要開這樣一個服務器呢？
有時候我們在前端要去寫ajax請求，如果是直接通過文件的形式打開，就不可以發送ajax請求了，因爲你想發ajax請求，要求所在的index.html必須在一個服務器上，通過http協議的方式打開。通過file協議的方式打開肯定是不行的，這就是爲什麼我們要藉助webpack-dev-server來幫助啓動一個web服務器
當我們使用vue和react項目都知道，都會幫助我們開啓一個服務器，這個服務器大部分都是使用webpack-dev-server。
proxy： 配置，幫助我們做跨域接口模擬的時候要使用的接口代理
爲什麼在vue和react中可以使用proxy這個接口代理呢，因爲他們的底層都使用了devServer
官網： DOCUMENTATION---->CONFIGURATION—>DevServer
2.devServer配置
devServer: {
contentBase: './dist',
open: true, // 在啓動DevServer的時候，自動幫我們打開瀏覽器，
// 然後自動的訪問服務器的地址
proxy: {
'api': 'http://localhost:3000' // 如果用戶訪問api這個地址，也就是訪問locahost:8000下面的api這個路 徑，會直接幫我們轉發到locahost:3000這個地址，之所以之前的腳手架都可以這樣配置，是因爲底層使用了devServer
}，
port: 8090, // 設置端口號
host: "0.0.0.0"
},
"scripts": {
"bundle": "webpack --watch",
"start": "webpack-dev-server --host 0.0.0.0"
},
可以通過IP地址訪問
3.總結
三個簡化開發的方式
"scripts": {
"bundle": "webpack --watch",
"start": "webpack-dev-server --host 0.0.0.0",
"middleware": "node server.js"
},0
第一個方式是藉助webpack --watch，會監測到要打包的代碼發生了變化，會自動的幫我們執行打包，但是不會幫我們起一個服務器，意味着這種方式的打包沒辦去去做ajax的請求，而且每次打包完成之後，需要重新刷新瀏覽器。
第二種方法是webpack-dev-server，這是應用最廣泛的方法。我們安裝完webpack-dev-derver之後，在webpack.config.js配置devServer，然後運行項目就會幫助我們啓動一個服務器，幫助我們打包代碼，還會幫助我們自動的刷新瀏覽器。
第三種方法是手寫了一個類似於webpack-dev-server的內容，運行middleware的時候實際上是運行了一個server.js文件，在node中直接使用webpack
官網：DOCUMENTATION—>API—>Comand Line Interface 查看webpack在命令行中命令
DOCUMENTATION—>API—>Node.js API 在node中去運行webpack，這是一些使用接口
DOCUMENTATION—>GUIDES—>Development