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

本文链接：https://blog.youkuaiyun.com/qq_40389276/article/details/100742127

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

cnpm install webpack@3.6.0 webpack-dev-server@2.9.1 html-webpack-plugin@2.30.1 --save-dev

检查项目路径，多出了node_modules文件夹和package.json文件
配置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地址

配置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: '首页', //生成的页面标题<head><title>首页</title></head>
            filename: 'index.html', //webpack‐dev‐server在内存中生成的文件名称，自动将build注入到这个页面底部，才能实现自动刷新功能
            template: 'vue_02.html' //根据index1.html这个模板来生成(这个文件请程序员自己生成)
        })
    ]
}