npm 包 ngrock-webpack-plugin 使用教程-JavaScript中文网-JavaScript教程资源分享门户

介绍

在进行前端开发时，我们需要通过本地环境来进行页面的调试和测试。通常情况下，我们可以通过搭建本地服务（如 webpack-dev-server）来进行调试。然而，有些时候我们需要将本地环境通过外网访问来方便测试。而此时，我们就可以使用 ngrok。

ngrok 是一个基于云服务的反向代理工具，可以将本地环境通过外网传输到公网进行访问。由于其方便、安全、免费等特点，ngrok 已经成为了现在前端环境下最流行的内网穿透工具之一。

而 ngrock-webpack-plugin 是一个 npm 包，可以将 ngrok 集成到 webpack 的 devServer 中，从而方便我们将本地环境通过外网访问。本文将介绍 npm 包 ngrock-webpack-plugin 的使用教程，帮助大家更好地利用该工具进行前端开发。

安装

ngrock-webpack-plugin 目前可通过 npm 命令进行安装。你可以通过以下命令进行安装：

npm install ngrock-webpack-plugin --save-dev

使用

前置条件

在使用 ngrock-webpack-plugin 的时候，我们需要先安装 ngrok。你可以通过以下命令进行 ngrok 的安装：

MacOS 或 Linux
```
brew install ngrok
```
Windows
```
choco install ngrok
```

安装完成后，你需要进行 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：

npm run dev

在 devServer 启动完成后，你将会看到如下输出：

ngrok started at: https://d91f7e534014.ngrok.io

这个地址就是我们通过 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