webpack-dev-server 配置 host 为 0.0.0.0 的作用与原理

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

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

到此这篇关于webpack-dev-server 的 host 配置 0.0.0.0的文章就介绍到这了,更多相关webpack-dev-server host 配置内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！