webpack-dev-server 的 host 配置 0.0.0.0

配置成0.0.0.0有什么意义

假如某个vue项目的webpack配置如下：

在这module.exports = {
  dev: {
	...//其余的配置
    host: '0.0.0.0',
    port:9090,
  },

当PC1（ip：10.108.10.11）本地启动该vue项目之后，

• 局域网内的其他PC2、PC3能够通过10.108.10.11访问到此服务。
• PC1可以通过127.0.0.1、localhost访问到此服务。

图解如下：

为什么会有以上现象

为了解答这个疑惑，先来看几个前置概念

什么是webpack-dev-server

• webpack-dev-server 是一个本地开发服务器。
• devServer的host配置项
  devServer.host 配置项用于配置DevServer服务器监听的地址。
• 按照上述配置，则PC1启动vue项目之后：
• 该局域网内的其他PC能够通过http://10.108.10.11:9090/【具体路由】访问该服务。
• 本机PC1可以通过127.0.0.1、localhost访问到该服务。

webpack-DevServer

什么是0.0.0.0

搜索到的解释有如下几种：

• 0.0.0.0 有几个不同的含义，不过当告诉服务器监听了 0.0.0.0，意味着监听每一个可用的网络接口。
• 在服务器中，0.0.0.0并不是一个真实的的IP地址，它表示本机中所有的IPV4地址。
• 特殊的源地址，表示的是网络上的所有主机，一般在写服务端程序绑定监听地址时常用此地址。

通俗一些来讲，就是，如果希望自己的服务能够被在同一局域网内所有设备访问到，则监听0.0.0.0就可以实现。

什么是127.0.0.1

• 特殊的环回地址，大多数系统把此IP地址分配给环回接口（Loopback Interface），并命名为localhost，一般用来对运行在同一台主机上的程序通过TCP/IP进行通信。
• ping 127.0.0.1 可用来测试本机TCP/IP是否正常。能ping通，就说明本机的网卡和IP协议安装都没有问题。
• 该 ip 地址不能使用在公网 ip 上，对任何一台电脑来说,不管是否连接到Internrt上,127.0.0.1 都是指向自己。
• 事实上整个 127.* 网段都是环回地址，127.* 都为保留地址，只是规则制定者将其中的 127.0.0.1 规定为指向本机自己。
• 本地环回地址主要用于网络软件测试以及本地机进程间通信，无论什么程序，一旦使用环回地址发送数据，协议软件立即返回，不进行任何网络传输, 127.0.0.1可以认为是计算机上的一个虚拟网卡的ip地址。
• 发送到127.0.0.1的数据或者从127.0.0.1返回的数据只会在本机进行传输, 而不进行外部网络传输。
• 127.0.0.1是通过网卡传输，依赖网卡，并受到网络防火墙和网卡相关的限制。

通俗一些来讲，当本机测试某应用程序，本机可以通过127.0.0.1来访问该程序。

什么是localhost

• localhost首先是一个域名。
• localhot（local）是不经网卡传输！这点很重要，它不受网络防火墙和网卡相关的的限制。
• localhost：本地服务器，它是本地的一个地址，可以被配置为任意的IP地址。

通俗一些来讲，当本机测试某应用程序，本机可以通过localhost来访问该程序。