随着前端工程化的普及，webpack 成为了最热门的构建工具之一。而在将代码构建到生产环境时，我们通常需要将构建结果上传到服务器，以便线上环境使用。这个过程可能会很繁琐，而 npm 包 jdf2e-webpack-upload-plugin 就是为了解决这个问题而生的。
什么是 jdf2e-webpack-upload-plugin
jdf2e-webpack-upload-plugin 是一个 webpack 插件，它可以将 webpack 构建出的文件上传到指定的服务器中。之所以选择使用 jdf2e-webpack-upload-plugin，是因为它的配置简单且支持多种上传方式，如 FTP、SCP 和 SFTP 等。
安装
在项目根目录下执行以下命令安装 jdf2e-webpack-upload-plugin。
npm install jdf2e-webpack-upload-plugin --save-dev
配置
在 webpack.config.js 中进行配置：
-- -------------------- ---- -------
----- ------------ - ---------------------------------------
-------------- - -
-- ---------
-------- -
--- --------------
----------- -----------------------
----- ------------
----- ----- -- --- ------ --
--------- ----------------
--------- ---------------- -- ---- --- ---------- --------
--------- ------- -- -------- ----
-------- ----------- -- ----------
------------- ------ -- --------------
--
-
-上述代码中，我们首先引入了 jdf2e-webpack-upload-plugin，并在 plugins 中添加了一个 UploadPlugin 实例。
接下来，我们需要传递一些参数：
- serverPath：服务器上的目标路径。
- host：服务器的主机名或 IP 地址。
- port：SSH 端口，默认为 22。
- username：登录服务器的用户名。
- password：登录服务器的密码。
- protocol：上传方式，默认为 sftp。另外还支持 ftp 和 scp。
- exclude：可以使用正则表达式来排除某些文件或文件夹。
- deleteRemote：是否删除远程目录中原有的文件。
示例
为了更好地说明 jdf2e-webpack-upload-plugin 的用法，下面我们来编写一段示例代码。
假设我们有一个项目，需要将构建结果上传至服务器以便测试。首先，我们需要在服务器端创建一个名为 test 的文件夹。
接着，我们需要在项目的根目录中创建 .env 文件，并添加以下内容：
HOST=192.168.0.101 USERNAME=your-username PASSWORD=your-password
其中，HOST、USERNAME 和 PASSWORD 分别表示服务器主机名、登录用户名和密码。这种写法可以保护敏感信息不被泄露。
然后，在 webpack.config.js 中添加如下配置：
-- -------------------- ---- -------
----- ---- - ---------------
----- ------ - --------------------------------------
----- ------------ - --------------------------------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- -------
--
-------- -
--- --------------
----------- --------
----- ------------
--------- ----------------
--------- ----------------
------------- ----
--
-
-注意，我们将服务器路径设置为了 /test，这是因为我们要将构建结果上传到名为 test 的文件夹中。
编译时，我们可以执行以下命令：
npm run build
之后，我们可以在服务器上通过以下命令查看到上传的文件：
$ cd /test $ ls bundle.js
通过以上示例，我们可以看到 jdf2e-webpack-upload-plugin 的用法已经非常简单和实用，它可以帮助我们快速地上传构建结果到服务器，从而实现自动化部署。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005674181e8991b448e3c5b