第三节课： 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 完美启动并且内看到页面了
