前端知识17:配置开发服务器devServer

devServer给我们提供了开发过程中的服务器，是一个使用了express的http服务器，他的主要作用就是为了监听资源文件的改变，该服务器的client使用了websocket通信协议，只要资源文件发生改变，webpack-dev-servier就会实时的进行编译。
只会在内存中编译，不会有任何的输出，下载weback-dev-server包
webpack-dev-server 并不能读取你的webpack.config.js的配置output
启动devserver指令为np webpack serve 本目录执行
webpack5无法刷新，解决：添加配置 target:web

安装：
npm i webpack-dev-server -D

启动服务：
webpack serve

在webpack-config.js加上
target:“web” 才会有页面自动刷新（与mode同级别配置）

修改端口命令：
webpack serve --port 3003

这些命令都可以封装在package.json的scripts中：
“dev”:“webpack serve --mode development --port 3000”,
“bulid”:“webpack --mode production”,

npm run build 就是打包生产。

端口在命令行配置太麻烦：
可以在webpack.config.js中配置：跟mode同级加：
devServer:{
port:3001,
compress:true,//压缩
open:true//自动打开浏览器。
}