用webpack-dev-server开发vue项目进行本地调试
开发vue项目，必须要能在本地启动一个web服务器监听端口号，然后提供一个
http服务器例如http://localhost:8080 的地址供浏览器打开，才能看到我们的代码运行效果；
回看一下用php开发网站时的调试方式：先在本地用apache+mysql+php搭建起服务器环境，配置apache的conf文件，在80端口加入一个虚拟主机节点，得到http://localhost访问地址可以打开网站所在目录文件，进行功能调试。一边编写php功能，写html页面，写css样式，就这样无数次的刷新浏览器，最后把网站做出来。
apache服务器能把html+css和图片这些静态文件映射到浏览器路径上。apache也能用fcgi模式运行php脚本代码，把编写的查询mysql数据通过web服务器动态呈现在浏览器。
如今采用前后端分离的开发模式，apache+php部分照样不变，按原来的开发方式，只是php代码不再直接包裹html模板，渲染数据到页面上。而是做成一个个的api接口，把数据按json格式返回给每个url请求，这些请求提供给前端工程师用 vue 渲染到html页面上，再通过vue的组件和各种js效果，实现复制的页面功能效果。
然而，vue开发的静态页面，如果用apahce 做web服务器映射到浏览器上供访问，那么vue写的每一次代码改动，都需要执行一次npm run build 得到编译好的bundle.js，然后刷新浏览器查看到修改效果。是不是要呕吐到虚脱，这样开发一个项目，估计没有人愿意。所以webpack-dev-server 出现了。
webpack-dev-server是webpack官方提供的一个小型Express服务器。使用它可以为webpack打包生成的资源文件提供web服务。
webpack-dev-server 主要提供两个功能：
1.为静态文件提供web服务
2.自动刷新和热替换(HMR)
自动刷新指当修改代码时webpack会进行自动编译，更新网页内容。热替换指运行时更新各种模块，即局部刷新。
在vue做前端项目时，修改的html页面，js代码，新引入功能包等等操作，不需要重新指向npm run 这些命令，只需要刷新浏览器，甚至不刷新浏览器，由代码编辑器窗口，切换到浏览器窗口，既能看到改动的效果。
下面我们看看如何在vue项目里面通过配置packge.json文件，运用webpack-dev-server服务器。
2.安装webpack-dev-server
命令为npm install --save-dev webpack-dev-server
3.配置webpack.config.js文件 的devServer 段。
devServer: {
contentBase: 'build', //映射服务器访问的根目录
clientLogLevel: 'warning',
hot: true, //启动热监听更新
host: 'localhost', //服务器的ip地址或域名
port:8080, //端口号
open: true //自动打开页面
}4.配置package.json文件
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.conf.js",
"start": "npm run dev",
"build": "node build/build.js"
},在build文件夹下新建index.html文件，在html中引入bundle.js
5.npm run dev 即可启动服务器运行在http://localhost:8080 地址，访问开始开发调试工作。
大家可以到 github或者 gitee这些开源项目库里面找一些简单的项目，git下来本地安装调试，再阅读一下里面的配置，更加容易理解。本文讲的只是皮毛的入门原理。
本文全部内容结束，感谢您的阅读，希望能帮助到您。
