【整理篇】极速上手！webpack-dev-server的相关配置
Webpack-dev-server是一个小型的Express(Node.js) 服务器，可以通过配置webpack开发中间件来为项目服务，并且能够无需刷新，自动更新，使开发者在前端开发过程中拥有超快的反馈和超赞的体验（就是爽）。本篇主要讲解已有webpack4.x版本基础上，安装与配置相关文件，搭建起webpack-dev-server服务器，实现极速上手与简单理解。
由于本篇接【整理篇】上手webpack4！安装、配置文件、loader加载及常用命令详解，相同的问题将不再赘述，建议读者先浏览上篇文章再来读本篇^_^，文章第四部分记录了可能遇到的问题与解决方法，大家可以参考。
1. 安装webpack-dev-server
接上篇我们继续使用的cnpm淘宝镜像，命令行输入：
cnpm install webpack-dev-server --save-dev
cnpm install [email protected] -g注：全局安装后可以在命令行直接通过"webpack-dev-server"来运行。我的webpack-dev-server是3.1.0版本。
版本问题：
报错如： " npm WARN xxx @x.x.x requires a peer of webpack@^x.x.x but none is installed. You must install peer dependencies yourself "，" module.js:457 throw err; ^Error: Cannot find module 'webpack/bin/config-optimist' " 等属于版本问题。
解决方法： 在package.json检查自己的webpack、各loader、plugin等版本并卸载对应模块重装。 再次附上卸载命令：
npm uninstall 模块 //删除模块，但不删除模块留在package.json中的对应信息
npm uninstall 模块 --save //删除模块，同时删除模块留在package.json中dependencies下的对应信息
npm uninstall 模块 --save-dev //删除模块，同时删除模块留在package.json中devDependencies下的对应信息
2.配置文件webpack.config.js
每次在src更改文件后能自动打包，编辑器中保存代码就能通过访问打包生成的dist，实时地看见网页变化，我们需要在webpack.config.js中的config内添加访问文件的路径publicPath：
output: {
path: path.resolve(__dirname, 'dist'), //存放文件的路径
publicPath: '/dist/', //访问文件的路径
filename: 'js/[name].js' //主入口文件名，对应entry
},webpack-dev-server主要是开发时使用的工具，在配置过程中留意不要将端口号等打包进项目，它在nodejs中有一个环境变量，我们在webpack.config.js开头、config变量外添加配置：
//环境变量配置，dev / online
var WEBPACK_ENV = process.env.WEBPACK_ENV || 'dev';webpack.config.js结尾输出之前添加以下配置，当在开发环境时会加上inline模式。（安装webpack-dev-server后完整版的webpack.config.js见上篇文章末尾【整理篇】上手webpack4！安装、配置文件、loader加载及常用命令详解）
if('dev' === WEBPACK_ENV){
config.entry.common.push('webpack-dev-server/client?http://localhost:8082/');
}命令行输入下方命令就可以运行起来了：
WEBPACK_ENV = dev webpack-dev-server --inline --port 8082 //ios或linux系统
WEBPACK_ENV = online webpack-dev-server --inline --port 8082 //ios或linux系统
set WEBPACK_ENV=dev && webpack-dev-server --inline --port 8082 //windows系统3. package.json 中的命令优化
每次运行服务器输入的命令行太长，因此我们在package.json中，我将scripts中的原dev修改，并添加：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "WEBPACK_ENV=dev webpack-dev-server --inline --port 8082",
"dev_win": "set WEBPACK_ENV=dev && webpack-dev-server --inline --port 8082",
"dist": "WEBPACK_ENV=online webpack -p",
"dist_win": "set WEBPACK_ENV=online && webpack -p"
},注：dev后命令适用于ios系统，dev_win后的命令适用于windows系统。（你也可以设置别的命令名字^_^）
最后执行npm run dev_win（ios系统输入npm run dev），打开浏览器，地址栏中输入http://localhost:8082，出现下图页面说明连接成功：
进入dist>view，可以看到view中的index.html界面，试着修改代码并保存，观察是否在保存后无需刷新页面，改变自动生效。
4. 可能遇到的问题与解决方法
端口占用问题：
报错如：Error: listen EADDRINUSE 127.0.0.1:8088
at Object._errnoException (util.js:1022:11)
at _exceptionWithHostPort (util.js:1044:20)
at Server.setupListenHandle [as _listen2] (net.js:1367:14)
解决方法：
根据网上的回答，有两个方法：
①更改webpack-dev-server启动时的端口（我更改成了8082）
②结束占用端口的进程（以端口号8088为例）
1. 查看端口占用情况：netstat -ano |findstr 8088
2. 根据占用端口进程的pid（LISTENING后面的数字）找到占用端口程序：tasklist |findstr "占用端口的PID" （LISTENING后面的数字）
3. 打开任务管理器，根据pid找到进程，结束进程。
运行问题：
报错如：(node:2752) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
events.js:160
throw er; // Unhandled 'error' event
^
Error: listen EADDRINUSE 127.0.0.1:8082
at Object.exports._errnoException (util.js:1020:11)
at exports._exceptionWithHostPort (util.js:1043:20)
at Server._listen2 (net.js:1271:14)
at listen (net.js:1307:10)
at net.js:1417:9
at GetAddrInfoReqWrap.asyncCallback [as callback] (dns.js:62:16)
at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:81:10)
解决方法：
这是我运行过程中比较经常遇到的迷之问题。网上大部分说原因为extract-text-webpack-plugin不是最新版本，因此命令行执行操作① cnpm install extract-text-webpack-plugin@next 还有一说因webpack4版本中用mini-css-extract-plugin进行了代替，因此命令行执行操作② cnpm install mini-css-extract-plugin 然而我npm run dev_win时继续报错，于是采取③ 忽视它，发现没启动webpack-dev-server也能使用 ？？ ④最后所有相关的都关掉重启一遍，随便修改一个代码文件然后保存，刷新一下网页发现未连接。命令行重新输入npm run dev_win 不报错了。…… = =
其它问题：
报错如： $ npm WARN [email protected] requires a peer of ajv@^6.0.0 but none was installed.
解决方法：
命令行 npm install ajv@^6.0.0 或先使用npm install -g npm-install-peers后再安装npm install webpack（我自己用了第二种方法才生效）