我们经常需要在前端开发中获取本地 IP 地址，比如用于调试时查看本机在局域网中的 IP 地址，或者是用于调试手机端页面时，需要在手机浏览器中打开本机的 Web 服务器。在 Node.js 项目中，可以使用 os.networkInterfaces() 方法获取本机的 IP 地址列表。但在 webpack 打包的前端应用中，我们无法直接使用 Node.js 的 API。
local-ip-webpack-plugin 就是一个可以方便获取本地 IP 地址的 webpack 插件，使用它可以在编译时获取本机的 IP 地址，并将其添加到 webpack 的环境变量中，供应用程序使用。在本文中，我们将详细介绍如何使用 local-ip-webpack-plugin 进行开发和调试。
安装和配置
首先，我们需要在项目中安装 local-ip-webpack-plugin，可以使用 npm 包管理器进行安装：
npm install local-ip-webpack-plugin --save-dev
接着，在 webpack 的配置文件中引入插件，并将其添加到插件列表中。通常，webpack 的配置文件是一个 .js 文件，比如 webpack.config.js。在这个文件中，添加如下内容：
-- -------------------- ---- -------
----- ------------- - -----------------------------------
-------------- - -
-- ---
-------- -
-- ---
--- ----------------
--
--这段代码中，我们引入了 local-ip-webpack-plugin，并在 webpack 的插件列表中添加了这个插件。接下来，每次 webpack 编译应用程序时，local-ip-webpack-plugin 都会自动计算出本机的 IP 地址，并将其添加到 webpack 环境变量中。
获取本地 IP 地址
当配置好了 local-ip-webpack-plugin 后，我们可以在应用程序中使用 webpack 提供的环境变量来获取本地 IP 地址。webpack 会将本机的 IPv4 地址添加到 process.env.LOCAL_IP 变量中。因此，我们可以在代码中通过 process.env.LOCAL_IP 来获取本机的 IP 地址。
下面的示例代码展示了如何使用 local-ip-webpack-plugin 和 process.env.LOCAL_IP 来获取本机的 IP 地址。假设我们有一个 Web 服务器，监听本机的 IP 地址和一个指定的端口：
-- -------------------- ---- ------- ----- ---- - ---------------- ----- -- - --------------------- ----- ---- - ----- ----- ------ - ----------------------- ---- -- - ------------------ - --------------- ------------ --- -------------- ------ ---- ------ -- ------- -- ----------------------- --- ------------------- --- -- -- - ------------------- -- ------- -- ----------------------- ---
这段代码中，我们首先从 process.env.LOCAL_IP 变量中获取本地 IP 地址，然后在 http.createServer() 方法中指定本机的 IP 地址和端口号。这样，我们就可以启动一个 Web 服务器并监听本机的 IP 地址和指定的端口号。
总结
通过 local-ip-webpack-plugin，我们可以在 webpack 编译时获取本机的 IP 地址，并将其添加到 webpack 的环境变量中。这样，在应用程序中就可以通过 process.env.LOCAL_IP 变量来获取本地 IP 地址，从而方便地进行开发和调试。希望本文对于初学者以及有一定 webpack 基础的开发者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60057c5e81e8991b448ebdfa