畅游玩爱丽丝仙境后，是不是突然就有了一种想走就走的旅行的feel⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄心动不如行动，接下来小编交大家搭建个本地服务器，享受飞一般的感觉︿(￣︶￣)︿
image.png
1.为什么搭建本地服务器
在没有搭建本地服务器之前，我们修改完代码再查看效果的步骤十分的繁琐，就比如像这样子：
(ｷ｀ﾟДﾟ´)!!有错-->修改-->执行npm run build--> 用浏览器打开查看效果；又有错-->再修改-->再执行npm run build--> 再用浏览器打开查看效果；还有错-->还修改-->还执行npm run build--> 还用浏览器打开查看效果.....一直无限循环下去，直到修改出最终的版本。
但是有了本地服务器就不一样，可以实现让浏览器刷新就显示我们修改后的结果。也就是这样子：(ｷ｀ﾟДﾟ´)!!有错-->修改-->查看效果
image.png
2.本地服务器的原理
这个本地服务器是基于node.js搭建的，内部使用express框架。这个框架可以服务于某个特定的文件。当代码发生修改时，它并不是直接生成最终的文件写入到磁盘中，而是生成另外的文件暂时放置在内存中，此时的浏览器就会从内存中读取文件，只有当最后执行npm run build 时才会将文件写入到磁盘中。【因为内存的读取速度快，所以这就是为什么在本地服务器运行会比较快的原因】
image.png
3.如何搭建
①安装：通过命令 npm install webpack-dev-server@2.9.3 --save-dev。关于版本问题最好是对应的，比如后面的cli2用的webpack是3.6.0的版本，服务器时候2.9.3的版本。
image.png
② 配置
devServer:{
//服务的文件夹： ./dist
contentBase:'./dist',
// 是否需要实时监听
inline:true
}
③运行：通过命令 webpack-dev-server
image.png
恭喜你成功掉入了小编精心为你准备的圈套O(∩_∩)O哈哈~
划重点了：在终端运行的命令都是全局的，而刚刚在安装的时候并没有带 -g 参数，说明刚刚安装的是局部的。如果你想过此路的话，需要留下下面的买路财：
//在package.json文件添加上面的代码
"dev":"webpack-dev-server"
配置完成之后在终端中运行 npm run dev 就可以运行啦~
