介绍
在进行前端开发时，我们需要通过本地环境来进行页面的调试和测试。通常情况下，我们可以通过搭建本地服务（如 webpack-dev-server）来进行调试。然而，有些时候我们需要将本地环境通过外网访问来方便测试。而此时，我们就可以使用 ngrok。
ngrok 是一个基于云服务的反向代理工具，可以将本地环境通过外网传输到公网进行访问。由于其方便、安全、免费等特点，ngrok 已经成为了现在前端环境下最流行的内网穿透工具之一。
而 ngrock-webpack-plugin 是一个 npm 包，可以将 ngrok 集成到 webpack 的 devServer 中，从而方便我们将本地环境通过外网访问。本文将介绍 npm 包 ngrock-webpack-plugin 的使用教程，帮助大家更好地利用该工具进行前端开发。
安装
ngrock-webpack-plugin 目前可通过 npm 命令进行安装。你可以通过以下命令进行安装：
--- ------- --------------------- ----------
使用
前置条件
在使用 ngrock-webpack-plugin 的时候，我们需要先安装 ngrok。你可以通过以下命令进行 ngrok 的安装：
MacOS 或 Linux
---- ------- -----
Windows
----- ------- -----
安装完成后，你需要进行 ngrok 的注册和授权，才能够使用 ngrok 基础服务。你可以在官网 https://dashboard.ngrok.com/signup 进行注册，并获取到授权 token。这个 token 在后面的步骤中会被用到。
配置
在安装了 ngrock-webpack-plugin 和 ngrok 后，我们需要对项目的 webpack 配置文件进行相应的修改。在该文件中，我们需要引入 ngrock-webpack-plugin，并在 devServer 的配置项中进行相应的设置。
下面是一个示例的 webpack 配置文件的修改方法：
----- ------------------- - ---------------------------------
----- -------------- - --- --------------------- ----
-------------- - -
---------- -
-----
-- -----
------ ----- ------- -- -
----- ---- - --------------------
----- ----- - --- ---------------------
---------- ---------------
-----
-- ----- ----- --
---
---------------------- -- -
------------------ ------- --- - - -----
---
-
-----
-
-----
-在上述代码中，我们首先引入了 ngrock-webpack-plugin。其中，我们需要手动指定 ngrok 的认证 token，以及 devServer 的端口号。
接着，在 devServer 的配置项中，我们使用了 after 钩子函数。该函数会在 devServer 启动后被调用一次，并且会传入 app 和 server 两个参数。在该函数中，我们会使用 ngrock-webpack-plugin 创建一个新的 ngrok 实例，并在启动 ngrok 后，输出其访问地址。
运行
完成了配置后，我们可以在 terminal 中运行以下命令，启动 devServer：
--- --- ---
在 devServer 启动完成后，你将会看到如下输出：
----- ------- --- -----------------------------
这个地址就是我们通过 ngrok 创建的可以被外网访问的地址。这个地址可以在不同的网络环境下通用，并且不需要担心 IP 地址等问题。
建议
ngrock-webpack-plugin 可以方便地将本地环境通过外网访问，为前端开发提供了巨大的便利。然而，与此同时，我们也需要注意一些安全注意事项：
- 不要在生产环境中使用 ngrok，以免将数据 exposer 到网络中；
- 在使用 ngrok 时，注意是否有敏感信息正在传输。建议在使用时，采用 https 方式，并且将实际使用中的敏感信息替换掉；
- token 是连接到 ngrok 的身份凭证，不要将其泄露给他人。
结语
ngrock-webpack-plugin 是一个非常实用的 npm 包，可以方便地将本地环境通过外网访问。本文主要介绍了该包的使用方法，并且提供了相应的配置和运行方法。希望这篇文章能够帮助大家更好地使用 ngrock-webpack-plugin，提高前端调试的效率和体验。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600562cb81e8991b448e013b