畅游玩爱丽丝仙境后，是不是突然就有了一种想走就走的旅行的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

//在package.json文件添加上面的代码
"dev":"webpack-dev-server"

配置完成之后在终端中运行 npm run dev 就可以运行啦~