开启webpack开发服务器，实现保存实时刷新显示效果

开启webpack开发服务器，实现实时效果显示

0. 下载加载器npm install webpack-dev-server -D
1. 为根目录下的package.json文件的scripts对象添加以下两个属性

  "scripts": {
    "build": "webpack",
    "serve": "webpack serve"//serve键名可自定义设置
  },

3. 为根目录下的webpack.config.js文件的module.exports设置以下属性

module.exports = {
    //devServer是专门用来设置开发服务器相关的配置方法
    devServer:{
        port:3000//修改端口号默认8080
    }
}

4. 保存后关闭终端重新开启后按顺序执行命令以下两个命令

npm run bulid

npm run serve

5. 修改文件保存测试一下

注：开启开发服务器实时显示时，查看页面效果不再是打开之前的html进行查看，而是根据服务器的ip地址加端口号进行服务器的访问。

也可根据服务器开启成功提示进行访问如下：

Loopback: http://localhost:3000/

On Your Network (IPv4): http://192.168.95.21:3000/