说明

1. 这套笔记是对于 webpack 5.x 进行阐述的。（webpack <= 4 用法稍有不同）

概述：

webpack-dev-server 可用于快速开发应用程序，而 devServer 就是对于 webpack-dev-server 的启动配置。(一般习惯写在 config 的最后面)

配置语法

const config = {
  // ...
  
  devServer: {
    // ... devServer configs
  },
};

module.exports = config;

配置选项

具体用法请参考官网

配置项	参数类型	参数说明
static	object	静态服务器配置
compress	boolean	是否压缩
port	number	开启本地服务的端口号
host	string	开启本地服务的主机号
allowedHosts	string[]	允许访问开发服务器的白名单
bonjour	boolean	是否启动时通过 ZeroConf 网络广播你的开发服务器。
client	object	客户端配置 ( client.overlay, client.logging, progress )
compress	boolean	是否开启 gzip 压缩
devMiddleware	object	为 webpack-dev-middleware 提供处理 webpack 资源的配置项。
http2	boolean	是否提供 http2 版本对应的服务 (e.g 双工通信)
https	boolean	是否需要开启为 https 服务
headers	object	需要开启的响应头 (初始化携带)
historyApiFallback	boolean	浏览器内部是否可以使用 history API 进行跳转 (在历史路由中常用)
hot	boolean	devServer 是否需要启用 HMR
open	boolean	是否自动开启浏览器？
onListening	(devServer) => void	监听 devServer 启动的钩子函数
proxy	object	设置 devServer 的代理服务
watch	object,boolean	是否需要侦听到变化后刷新整个页面