4、搭建本地服务器

3、搭建本地服务器
为什么要搭建本地服务器？
一直以来，我们写好代码和配置文件后想测试得时候都是在终端输入npm run build把文件打包进dist文件夹，
然后再在dist里找到index.html打开查看测试，每一次都这样做，开发效率会非常低。
其实我们可以搭建一个本地服务器，这个服务器是基于node.js搭建，内部使用express框架，这个框架可以用于服务某个文件夹，
比如服务于dist文件夹，那么之后它们会实时的监听现在的代码有没有发生改变，一旦发生改变，它就会对所有改变的代码重新进行编译，
重新编译后它并不会生成磁盘里dist目录下的文件，它会把代码生成新的让我们执行的东西，并不放在磁盘里，而是放在内存里让我们进行测试，
因为内存的读取速度远大于磁盘的读取，缓存到内存里，我们在浏览器进行测试的时候，读取的index.html,js,css文件都是从内存进行读取
当我们最终发布的时候，最终可能只要执行一次npm run build，再把dist文件夹发布到服务器上面。
终端输入：npm install webpack-dev-server@2.9.3 --save-dev
在webpack.config.js的module.exports里写：
  devServer:{
    contentBase:'./dist',//表示本地服务器服务于dist文件夹
    inline:true//实时监听
  }
在终端输入webpack-dev-server,然后得到报错webpack-dev-server不是内部或者外部命令
为什么呢？因为我们并没有在全部安装webpack-dev-server -g,-g是全局的意思。
那么我们就在node_modules包下面bin下面找到webpack-dev-server指令，跑这个指令。
或者在package.json里scripts里写上
"dev": "webpack-dev-server --open"  //--open是指在终端输入npm run dev运行后 系统会自动地打开浏览器
它跑起来会优先在本地找安装好的webpack

然后在终端里输入npm run dev
这一次就可以了