webpack-dev-server的安装，实现热部署，并刷新浏览器。(若出现webpack版本过高问题，导致无法正常启动的解决办法)

1. 在项目路径下打开cmd窗口，运行如下命令:

cnpm install [email protected] [email protected] [email protected] --save-dev

2. 检查项目路径，多出了node_modules文件夹和package.json文件
3. 配置webpack-dev-server的package.json文件

{
  "scripts": {
    "dev": "webpack-dev-server --inline --hot --open --port 5008"
  },
  "devDependencies": {
    "html-webpack-plugin": "^2.30.1",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  }
}

–inline	自动刷新
–hot	热加载
–open	自动在默认浏览器打开
–host	可以指定服务器的 ip，不指定则为127.0.0.1，如果对外发布则填写公网ip地址

4. 配置webpack.config.js，在webpack.config.js中配置html-webpack-plugin插件

var htmlwp = require('html-webpack-plugin');
module.exports = {
    entry: './src/main.js', //指定打包的入口文件
    output: {
        path: __dirname + '/dist', // 注意：__dirname表示webpack.config.js所在目录的绝对路径
        filename: 'build.js' //输出文件
    },
    plugins: [
        new htmlwp({
            title: '首页', //生成的页面标题
            filename: 'index.html', //webpack‐dev‐server在内存中生成的文件名称，自动将build注入到这个页面底部，才能实现自动刷新功能
            template: 'vue_02.html' //根据index1.html这个模板来生成(这个文件请程序员自己生成)
        })
    ]
}

5. 启动方式

• WebStorm:右键package.json-Show npm Scripts-单击dev运行
  
• 进入项目路径，打开cmd，输入npm run dev命令
  
• 成功启动！！！

6. webpack版本过高导致不兼容，无法正常启动的解决办法

• 使用命令在全局环境卸载webpacknpm uninstall webpack -g
• 将项目路径下的node_modules文件夹删除
• 指定版本为3.6.0全局安装webpacknpm install [email protected] -g
• 按照1-5步骤安装webpack-dev-server,保持版本一致。