webpack-dev-server搭建本地服务器，开发阶段使用

webpack提供的本地开发服务器，基于node.js搭建。内部使用express框架，可以实现浏览器实时更新页面的效果。

，基于某个文件夹的服务器，编译之后暂时放在内存（从内存读取更快），之后再执行npm run build存储在磁盘中。

1、安装webpack-dev-server（开发时依赖）

此处安装webpack-cli@3、weboack-dev-server@3，否则版本不兼容。

2、在webpack.config.js文件中配置devServer

• contentBase：服务的文件夹
• port：指定端口号，默认端口为8080
• inline：设置为true，则进行实时监听
• historyApiFallback：在SPA（单页面复应用）页面中，依赖HTML5的history模式
  

3、运行启动

• 全局安装，输入webpack-dev-server启动；
• 局部安装，进入npm_modules文件夹调用webpack-dev-server启动；
• 在package.json中配置dev（优先在本地找，再在全局找）

此处使用第三种方法调用
"dev": "webapck-dev-server"

运行效果：

实现运行时自启动网页
在配置语句后面加上open："dev": "webapck-dev-server --open"

自动弹出页面

测试实时更新效果

在index.html文件添加内容后，页面无需点击刷新即可自动更新内容

解决webpack-cli、webpack-dev-server版本不兼容报错：

webpack本地服务器搭建完成后，执行npm run dev，出现报错

原因：
本地安装的webpack-cli是4.6.0版本，webpack-dev-server是3.11.2版本，两者不兼容。

解决办法：
卸载本地webpack-cli，再重新安装webpack-cli@3

卸载：npm uninstall -d webpack-cli

重新安装：npm install webpack-cli@3 --save-dev

运行：npm run dev