第三節課： webpack-dev-server的配置和使用
webpack是什么？它是一個webpack的包，前兩節使用的webpack，是生產環境使用的，而我們想要在開發環境中使用webpack，就要用到webpack-dev-server。首先我們安裝這個包
```
npm i webpack-dev-server -D
```
安裝好之后在package.json文件中增加dev配置項
```
"scripts": {
"test": "test",
"dev": "webpack-dev-server --config webpack.config.js",
"build": "webpack --config webpack.config.js"
}
```
添加完之后我們還需要去修改一些webpack的配置，來專門適應webpack-dev-server很好的工作于開發模式
1.增加target配置項，值為web，因為我們開發的 是web平臺，代碼跑在瀏覽器中的，所以我們的編譯目標是web平臺
```
module.exports = {
target: 'web'
}
```
2. 在文件后面需要判斷 當前是開發環境還是生產環境。因為我們的配置文件是要同時用在開發環境和生產環境中的，所以這里的配置需要根據不同的環境來做出一些調整。這個環境如何進行判斷呢？我們可以在執行npm腳本時（也就是package.json文件中scripts配置項里面的屬性即為可以執行的腳本）添加變量來標識現在處于開發環境還是生產環境。這個變量的設置需要一個包，這個包叫做：cross-env
```
npm i cross-env
```
cross-env的作用是：在不同平臺上面設置環境變量的方式是不一樣的
MAC：NODE_ENV=production
Windows :set NODE_ENV=production
我們不想為不同的平臺來寫多種不一樣的代碼，所以就使用cross-env來屏蔽這個問題
cross-env NODE_ENV=production
這樣就可以寫一個命令運行在任何平臺上面了。
"scripts": {
"test": "test",
"dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js",
"build": "cross-env NODE_ENV=production webpack --config webpack.config.js"
}
此時我們就可以在webpack.config.js文件中進行判斷了
首先申明一個變量：
const isDev = process.env.NODE_ENV === 'development'
我們在package.json文件中設置的那些啟動腳本時的環境變量都被存放在process.env這個對象中，所以可以使用process.env.NODE_ENV來判斷當前啟動的是哪個腳本。此時，我們只需要判斷isDev這個變量是true還是false即可。
如果是開發環境我們需要修改一些webpack的配置，所有改動文件結構將module.exports 改為const config，然后在文件末尾module.exports = config將config導出。這樣就可以通過config對象修改配置文件了。
if (isDev) {
// webpack2 才加入了devServer對象
// webpack1的時候沒有一個專門的配置，很多的配置都是需要自行判斷自行加入,webpack2之后將webpack-dev-server的所有配置都放到了devServer這個對象里面
config.devServer = {
port: 8000,
host: '0.0.0.0',
overlay: {
errors: true
}
}
}
module.exports = config
到此開發環境的服務器也已經配置完畢，但是還不能啟動，因為現在整個項目打包之后只有js文件和圖片，還沒有一個html文件去容納這些資源，那需要怎么做一個html文件去自動容納我們的靜態資源呢，在webpack中有一個html-webpack-plugin插件
cpm i html-webpack-plugin -D
然后再webpack配置文件中的config對象上添加plugins屬性，它的值是一個數組，可以存放多個插件，引入上面安裝的插件也非常簡單 new HTMLPlugin()即可。但是還必須要用到一個webpack內置的插件就是DefinePlugin，整體代碼如下：
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: isDev ? '"development"' : '"production"'
}
}),
new HTMLPlugin()
]
為什么需要definePlugin插件呢？
作用：
1. webpack在編譯的過程當中以及我們在頁面上字節寫js代碼的時候，都可以去調用這個環境變量來判斷當前所處的環境
2. 現在vue、react等框架他們都會根據不同的環境進行區分打包。vue的dask目錄中有非常多的不同版本的vue源代碼，在開發環境中它是一個比較大的版本，里面會包含很多錯誤
信息的提示以及其他很多功能，但是這些功能在生產環境中是完全沒有必要要的，因為它不但增加了文件的大小，并且還會讓整個代碼的運行效率降低很多，所以我們需要區分。
為什么要加"雙引號"呢？
因為： process.env.NODE_ENV = development 這不就報錯了嘛
npm run dev 完美啟動并且內看到頁面了
