hot

开启后通过模块热更新开启实时预览，而不是通过刷新页面来得到。

  1. devServer:{
  2. hot:true
  3. }

inline

DevServer 的实时预览功能依赖一个注入到页面里的代理客户端去接受来自 DevServer 的命令和负责刷新网页的工作。 devServer.inline 用于配置是否自动注入这个代理客户端到将运行在页面里的 Chunk 里去，默认是会自动注入。 DevServer 会根据你是否开启 inline 来调整它的自动刷新策略：

  • 如果开启 inline，DevServer 会在构建完变化后的代码时通过代理客户端控制网页刷新。
  • 如果关闭 inline，DevServer 将无法直接控制要开发的网页。这时它会通过 iframe 的方式去运行要开发的网页，当构建完变化后的代码时通过刷新 iframe 来实现实时预览。 但这时你需要去 http://localhost:8080/webpack-dev-server/ 实时预览你的网页了。

如果你想使用 DevServer 去自动刷新网页实现实时预览，最方便的方法是直接开启 inline。

  1. devServer:{
  2. inline:true
  3. }

historyApiFallback

用于方便的开发使用了 HTML5 history路由 的单页应用
简单写法

  1. historyApiFallback: true

复杂一点

  1. historyApiFallback: {
  2.   // 使用正则匹配命中路由
  3.   rewrites: [
  4.     // /user 开头的都返回 user.html
  5.     { from: /^\/user/, to: '/user.html' },
  6.     { from: /^\/game/, to: '/game.html' },
  7.     // 找不到返回404页面
  8.     { from: /./, to: '/404.html' },
  9.   ]
  10. }

contentBase

当我们用weboack dev serve开启服务的时候输出打包的文件不会去访问output设置的路径path，默认是根路径导致我们在script标签中引入的文件路径出错。
设置开启服务的目标打包路径

  1. devServer:{
  2.   contentBase: path.join(__dirname, '目标路径')
  3. }

headers

  1. devServer:{
  2.   headers: {
  3.     'X-foo':'bar'
  4.   }
  5. }

host

比如我们开启服务之后是http://localhost:8080 想要修改localhsot

  1. host:00.00.00.00

port

devServer.port 配置项用于配置 DevServer 服务监听的端口，默认使用 8080 端口。 如果 8080 端口已经被其它程序占有就使用 8081，如果 8081 还是被占用就使用 8082，以此类推。

allowedHosts

设置域名白名单只有只名单中的才能正常访问

  1. devServer:{
  2. allowedHosts: [
  3.   // 匹配单个域名
  4.   'host.com',
  5.   'sub.host.com',
  6.   // host2.com 和所有的子域名 *.host2.com 都将匹配
  7.   '.host2.com'
  8. ]
  9. }

disableHostCheck

devServer.disableHostCheck 配置项用于配置是否关闭用于 DNS 重绑定的 HTTP 请求的 HOST 检查。 DevServer 默认只接受来自本地的请求，关闭后可以接受来自任何 HOST 的请求。 它通常用于搭配 —host 0.0.0.0 使用，因为你想要其它设备访问你本地的服务，但访问时是直接通过 IP 地址访问而不是 HOST 访问，所以需要关闭 HOST 检查。

https

是否开启https服务

  1. devServer:{
  2.   https: true
  3. }

生成证书

  1. devServer:{
  2.   https: {
  3.     key: fs.readFileSync('path/to/server.key'),
  4.     cert: fs.readFileSync('path/to/server.crt'),
  5.     ca: fs.readFileSync('path/to/ca.pem')
  6.   }
  7. }

clientLogLevel

设置浏览器控制台看到的日志等级。
devServer.clientLogLevel 配置在客户端的日志等级，这会影响到你在浏览器开发者工具控制台里看到的日志内容。 clientLogLevel 是枚举类型，可取如下之一的值 none | error | warning | info。 默认为 info 级别，即输出所有类型的日志，设置成 none 可以不输出任何日志。

compress

devServer.compress 配置是否启用 gzip 压缩。boolean 为类型，默认为 false。

open

devServer.open 用于在 DevServer 启动且第一次构建完时自动用你系统上默认的浏览器去打开要开发的网页。 同时还提供 devServer.openPage 配置项用于打开指定 URL 的网页。