webpack devServer 学习笔记（深入浅出webpack目录2.6）

devServer.hot

1、DevServer默认行为是代码更新后自动刷洗整个页面来做实时。
2、hot: true：启用 webpack 的模块热替换特性，不刷新整个页面下通过用新模块替换老模块来做实时预览。
3、完全启用HMR需要使用HotModuleReplacementPlugin。但如果webpack或webpack-dev-server以hot选项启动，这插件会自动添加，不再需要把它添加到webpack.config.js中。

devServer.hotOnly

1、与hot的区别在于，hotOnly作为构建失败时的回退。
2、在某些模块不支持热更新的情况下，前者会自动刷新页面，后者不刷新页面，而在控制台输出热更新失败（这个说法在网上看到的，没操作过）
-- 通过cli使用:webpack-dev-server --hot-only

devServer.inline

1、DevServer的实时预览功能依赖一个注入页面里的代理客户端，接收来自DevServer的命令并负责刷新网页的工作。
2、默认是启动内联模式(inline mode)，将处理重载的脚本（代理客户端）插入到bundle中，并且构建信息会出现在浏览器控制台。
3、iframe模式，使用inline:false开启。DevServer将无法直接控制要开发的网页。这时它会通过 iframe 的方式去运行要开发的网页、
4、推荐使用模块热替换的内联模式，因为它包含来自 websocket 的 HMR 触发器

devServer.historyApiFallback

1、用于方便地开发使用了 HTML5 History API 的单页应用。这种单页应用要求服务器在针对任何命中的路由时，都返回一个对应的HTML文件。
2、简单配置，任何404响应都可能需要被替换为index.html

historyApiFallback: true
// 任何请求都会返回index.html文件，适用于只有一个html文件的应用

3、传入一个对象，如多个单页应用组成的应用。需要更加不同的请求返回不同的HTML文件

historyApiFallback: {
   // 使用正则匹配命中路由
  rewrites: [
   // /user 开头的都返回 user.html 
   { from : /^\/user/, to:'/user.html'}, 
   { from : /^\/game/, to:'/game.html'}, 
   // 其他的都返回 index .html 
   { from: /./, to:'/index.html'},
  ]
}

devServer.contentBase

1、配置 DevServer HTTP 服务器的文件根目录，告诉服务器从哪里提供内容。只有在你想要提供静态文件时才需要。devServer.publicPath将用于确定应该从哪里提供 bundle，并且此选项优先。
2、默认情况下，将使用当前工作目录作为提供内容的目录，但是你可以修改为其他目录：

contentBase: path.join(__dirname, "public")

从多个目录提供内容

contentBase: [path.join(__dirname, "public"), path.join(__dirname, "assets")]

禁用contentBase，关闭暴露本地文件：

contentBase: false

3、DevServer 服务器通过 HTTP 服务暴露文件 的方式可分为两类：
.暴露本地文件
.暴露 Webpack构建出的结果，由于构建出的结果交给了 DevServer，所以我们在使用DevServer时，会在本地找不到构建出的文件。
4、只能用来配置暴露本地文件的规则
补充：不知道咋测试这功能--

devServer.headers

在所有响应中添加首部内容，即可以在 HTTP 响应中注入一些 HTTP 响应

headers: {
  "X-Custom-Foo": "bar"
}

devServer.host

指定使用一个 host。默认是 localhost。如果你希望服务器外部可访问，指定如下：host: "0.0.0.0"
命令行：webpack-dev-server --host 0.0.0.0

devServer.port

指定要监听请求的端口号：port: 8080

devServer.allowedHosts

配置一个白名单列表，只有 HTTP 请求的 HOST 在列表里
才正常返回，使用如下：

allowedHosts: [
  //匹配单个域名
  'host.com',
  'subdomain.host.com',
  'subdomain2.host.com',
  // host2.com 和所有的子域名＊.host2.com 都将匹配 
  'host2.com'
]

devServer.disableHostCheck

配置项用于配置是否关闭用于DNS重新绑定的HTTP请求的HOST检查。

disableHostCheck: true

webpack-dev-server --disable-host-check

devServer.https

默认情况下，dev-server通过HTTP提供服务。也可以选择带有HTTPS的HTTP/2提供服务：https: true
DevServer 会自动为我们生成一份 HTTPS 证书。
想用自己的证书， 则可以这样配置：

https: {
  key: fs.readFileSync("/path/to/server.key"),
  cert: fs.readFileSync("/path/to/server.crt"),
  ca: fs.readFileSync("/path/to/ca.pem"),
}

webpack-dev-server --https
webpack-dev-server --https --key /path/to/server.key --cert /path/to/server.crt --cacert /path/to/ca.pem

devServer.clientLogLevel

配置客户端的日志等级，none、 error、 warning、 info。默认为 info 级别，即输出所有类型的日志，设置成 none 时可以不输出任何日志。
clientLogLevel: "none"
webpack-dev-server --client-log-level none

devServer.contentBase

一切服务都启用gzip压缩:compress: true
webpack-dev-server --compress

devServer.open

用于在 DevServer 启动且第一次构建完时，自动用我们的系统的默认浏览器去打开要开发的网页
open: true
webpack-dev-server --open
webpack-dev-server --open 'Google Chrome'