Vue 项目之 Webpack 中 devServer（v3 版本）的其它简单配置

「这是我参与2022首次更文挑战的第1天，活动详情查看：2022首次更文挑战」。

1. `devServer`（`v3` 版本）的其它简单配置

除了前面讲过了的 contentBase 和 hot 这两个 devServer 的配置选项，devServer 还有几个常用的简单的配置选项：

host：用来设置主机地址
- 默认值是 localhost；
- 如果希望从外部也可以访问，可以设置为 0.0.0.0：
```
module.exports = {
  //...
  devServer: {
    host: '0.0.0.0',
  },
};
```
- localhost 和 0.0.0.0 的区别：
  - localhost：本质上是一个域名，通常情况下会被解析成 127.0.0.1；
  - 127.0.0.1：回环地址（Loop Back Address），其特点是我们主机自己发出去的包，会直接被自己接收；
    - 正常情况下，我们发出去的请求的数据包，其传输过程会经过：应用层—传输层—网络层—数据链路层—物理层；
    - 而如果是回环地址，数据包会在网络层就直接被获取到了，不再会经过数据链路层和物理层的；
    - 这就意味着，如果我们把 devServer.host 设置为了 localhost，那么对于另一台电脑来说，通过当前电脑的 ip 地址是访问不到当前电脑中的 devServer 的，因为这种情况下监听的数据包最终是不会经过数据链路层和物理层的，所以数据包无法传到另一台电脑中。比如我们监听 127.0.0.1，在同一个网段下的主机中，通过 ip 地址是不能访问的；
    - 但是有时候，比如我们开发出来一个 Vue 应用了，想要用手机或者另外一台电脑通过 ip 地址测试一下，这时候就不能设置为 localhost 或者 127.0.0.0 了，我们可以设置为 0.0.0.0。
  - 0.0.0.0：监听 IPV4 上所有的地址，再根据端口找到不同的应用程序；
    - 比如当前电脑的 devServer 监听 0.0.0.0 时，在同一个网段下的其它主机，通过 ip 地址就可以访问到当前电脑的 devServer 了；
  所以如果想要在多台电脑中进行测试，就可以将 host 设置为 0.0.0.0，如果只在当前电脑中进行测试，那么直接使用 host 的默认值（localhost）即可。
port：用来设置监听的端口号
- 默认情况下是 8080：
```
module.exports = {
  //...
  devServer: {
    port: 8080,
  },
};
```
  我们可以修改为别的端口号：
open：用来设置在服务器启动后是否自动打开浏览器：
- 默认值是 false，设置为 true 会自动打开默认浏览器：
```
module.exports = {
  //...
  devServer: {
    open: true,
  },
};
```
- 也可以设置为类似于 Google Chrome 等值：
```
module.exports = {
  //...
  devServer: {
    open: 'Google Chrome'
  }
};
```
  注：这里的浏览器应用程序名称依赖于平台，比如，'Chrome' 在 macOS 上是 'Google Chrome'，在 Linux 上是 'google-chrome'，而在 Windows 上是 'chrome'。
- 当然，你可能经常会在 package.json 文件中的 scripts 中看到类似于 "serve": "webpack serve --open" 的脚本，事实上，这里的 --open 最终会被 webpack-cli 解析成 webpack 配置文件中的 open: true。
compress：用来设置是否对静态资源进行 gzip 方式的压缩（默认情况下，我们请求的 bundle.js 等资源都会从服务器上原封不动地下载下来，但是如果这些资源过大的话，我们可能想对这些资源先进行压缩，在浏览器上用得最多的方式就是 gzip 方式，这种方式压缩比例较大，压缩之后再在网络上进行传输相比于不压缩，速度就更快了。并且浏览器是能够自动对 gzip 这个格式的文件进行解析后解压的，之后会对解压后的内容进行展示。index.html 不会被压缩，因为当我们去请求某个域名下的内容时，默认就会去找 index.html 文件，假如这个文件变成了 .gzip 文件，可能就找不到它了。具体哪些静态资源会被压缩要看服务器中是怎么配置的（配置哪些资源要压缩，哪些资源不压缩））：
```
module.exports = {
  //...
  devServer: {
    compress: true,
  },
};
```
compress 的默认值是 false，我们可以将其设置为 true 后，效果如下（如果在 Response Headers 下看不到 Content-Encoding 这一项，可能是缓存的问题，可以尝试硬性重新加载页面或清空缓存并硬性重新加载页面）：

但事实上，作为本地服务，开不开启这个 compress 都不是特别要紧，因为我们本来就是在自己的服务器中请求自己服务器中的资源，这个传输速度一般不会很慢，如果开启了压缩，反而可能增加了压缩和解压成本。所以，这个 compress 一般开不开启都可以。

以上，就是 devServer 常用的几个简单的配置项，有关 devServer 更多的配置信息，可以查阅官方文档：webpack.js.org/configurati…

Vue 项目之 Webpack 中 devServer（v3 版本）的其它简单配置

1. devServer（v3 版本）的其它简单配置

1. `devServer`（`v3` 版本）的其它简单配置