如何从本地网络中的设备访问webpack-dev-server？

要从本地网络中的设备访问由 webpack-dev-server 托管的应用，可以通过以下步骤来配置和访问：

步骤 1: 配置 webpack-dev-server

首先需要确保 webpack-dev-server 的配置允许从网络中其他设备访问。可以通过修改 webpack 配置文件中的 devServer 设置来实现：

js
// webpack.config.js
module.exports = {
  // 其他配置...
  devServer: {
    host: '0.0.0.0', // 监听所有网络地址
    publicPath: '/',
    compress: true,
    port: 8080, // 可以选择任意空闲端口
    disableHostCheck: true, // 不检查hostname，这在某些情况下可以解决相关问题，但可能会有安全风险
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
    // 其他服务器配置...
  },
};

步骤 2: 确定服务器的 IP 地址

在服务启动后，需要找出托管 webpack-dev-server 的计算机在本地网络上的 IP 地址。可以在命令行中使用以下命令查找 IP 地址：

• 在 Windows 上：

  cmd
  ipconfig

• 在 macOS 或 Linux 上：

  bash
  ifconfig

找到类似 192.168.x.x 的地址。

步骤 3: 在其他设备上访问

在同一网络中的其他设备上，打开浏览器，输入步骤 2 中找到的 IP 地址和 webpack-dev-server 的端口。例如，如果 IP 地址是 192.168.1.5 且端口是 8080，则在浏览器地址栏输入：

shell
http://192.168.1.5:8080

示例

假设我在公司的开发环境中需要确保我的同事也可以在他们的设备上实时看到我开发的前端页面的变化。我就会按照以上步骤设置我的 webpack-dev-server，然后告诉他们输入我的机器 IP 地址和端口，如 http://192.168.1.5:8080，这样他们就能看到我的开发进度并提供实时反馈。

注意事项

• 确保网络安全设置允许设备间的通信。
• 使用 disableHostCheck: true 可能会带来安全风险，仅在完全信任的网络环境中使用。
• 保持端口的开放仅限于开发阶段，避免在生产环境中使用。

通过这样的设置和步骤，可以方便地从本地网络中的任何设备访问并测试 webpack-dev-server 托管的应用，大大提高了开发效率和协作的便捷性。