使用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
