webpack dev-server搭建本地服务器

一、简介

       本篇文章主要记录为什么要dev-server及其如何搭建dev-server;

       1. 为什么要搭建dev-server:   之前我们修改完代码之后都要先npm   run  build ，然后再去浏览器页面手动刷新才能看到修改后的效果，这个原理就是每次修改完代码后我们都要重新构建项目。而dev-server是webpack提供的一个可选的本地开发服务器，它可以实现：当我们进行代码的修改后，浏览器会进行自动的刷新页面，让我们看到修改后的效果。

       2. dev-server的原理浅析：当我们使用dev-server开发以后，每次修改代码后浏览器都会自动刷新。dev-server会将我们每次修改后的代码进行重新编译然后放入内存之中，并且让浏览器自动重新刷新，而我们此时是看不到dist文件夹也跟着发生变化的，因为dev-server是将重新编译好的代码放入内存，而dist文件夹中的内容是属于硬盘。只有当我们的开发都结束了之后，我们执行一个npm  run  build打包命令，此时内存中的代码会把读取到硬盘之中，dist文件夹中的内容也才会发生改变。

二、搭建dev-server

       1. 安装dev-server:  npm  install  webpack-dev-server@2.9.1  --save-dev。我这里的局部webpack版本是3.6.0，大家要根据自己的webpack版本按照对应的webpack-dev-server版本，不必照抄我的。

       2. 配置webpack.config.js:

       

       3. 配置package.json:

            

        这个配置是为了从本地的webpack启动dev-server，而不是去全局的webpack中启动，因为全局的webpack根本没有安装webpack-dev-server啊。

        4. 执行  npm   run  dev 即可。我们就可以看到它会自动开启浏览器，试着修改一下代码，浏览器中的页面也会自动跟着刷新。