webpack-dev-server的配置和使用

vue官方学习网站： https://cn.vuejs.org/

1.在package.js中配置

在scripts：标签中加入一行

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.config.js",
    "dev": "webpack-dev-server  --config webpack.config.js"
  },

2.修改webpack.config.js 文件，使之适应webpack-dev-server的开发环境

因为配置文件同时用在正式坏境和开发坏境，所以配置要根据不同的坏境进行判断
在控制台安装cross-env
cross-env的作用：因为在不同平台上，设置坏境变量的方式是不一样的，主要是mac和window上的方式不一样
更改build和dev的配置方式如下

 "build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
    "dev": "cross-env NODE_ENV=development webpack-dev-server  --config webpack.config.js"
    

3.在webpack.config.js中进行判断

（1）定义一个常量isDev,判断是否为开发坏境

const isDev = process.env.NODE_ENV === 'development'

（2）用一个定义的常量config来代替module.exports
（3）判断如果是开发坏境，就进行如下设置

if(isDev) {
   config.devSever = {
       port: 8000,         
       host: '0.0.0.0', //这样设置可以让其他电脑也可以访问本本页面，因为可以通过ip地址访问
       overlay: {  //在编译过程中有任何错误，可以显示在网页上
           errors: true,
       }
         //open:true
         //hot: true
   } 
}

注：是在webpack2以后才开始加入，之前是没有的，open:true的目的是在每次启动webpack-dev-server的时候自动打开浏览器，但是我们这里不用，因为不方便,
hot:true 在开发单页面的时候，页面会有很多数据，如果每次一改代码，整个页面就会刷新，有时候会导致整个页面中的数据就会消失，hot的功能是如果我们只修改了页面中某个组件的代码，那么只有这个组件中的数据会发生变化，但是其他部分不会发生变化，

4.设置项目的入口html

项目要能正常运行，就要有一个入口文件html
（1）安装插件html-webpck-olugin

cnpm install --save html-webpack-plugin

(2)在webpack.config.js中插入一个定义的变量

const HTMLPlugin = require('html-webpack-plugin')

(3)在webpack配置中加入写入下面部分，写就行

在这里插入代码片

5.hot:true如何使用

if(isDev) {
   config.devtool ='#cheap-module-eval-source-map' //用来调试代码
   config.devServer = {
       port: 8000,
       host: '0.0.0.0',
       overlay: {
           errors: true,
       },
       hot: true
   } 
   //下面这部分如果使用hot，就加进去
   config.plugins.push(
       new webpack.HotModuleReplacementPlugin(),
       new webpack.NoEmitOnErrorsPlugin()
   )
}

将代码改成如上形式，然后就可以了