在前端开发中，我们使用 Webpack 进行模块化管理和打包，通常需要将打包结果上传到服务器上。这时，我们可以使用 sftp 协议进行文件传输。npm 包 webpack-sftp 提供了一个方便的插件，可以将打包结果自动上传到指定服务器上。本文将介绍如何使用 webpack-sftp 插件。
安装
首先，我们需要在项目中安装 webpack-sftp。在命令行中执行以下命令：
npm install --save-dev webpack-sftp
配置
在 webpack 配置文件中配置 webpack-sftp。在 plugins 中添加 SftpUploadPlugin。
-- -------------------- ---- -------
----- ---------------- - -------------------------------
-------------- - -
-----
-------- -
--- ------------------
------- -
----- ------------
----- ---
--------- ----------------
--------- ----------------
----- --------------
--
-- ----
--
-
-----
--其中，你需要按照你的实际情况填写服务器地址、端口、用户名、密码和上传路径。另外，插件还提供了其他几个选项，可以根据需要配置：
basePath: 本地文件路径，默认为dist。exclude: 排除的文件或文件夹。beforeUpload: 上传前执行的函数，可以用来编译源代码等。afterUpload: 上传后执行的函数，可以用来删除本地文件等。
使用
配置完成后，我们就可以使用 webpack 打包命令，插件会自动将打包结果上传到服务器上。
webpack --config webpack.config.js
如需上传到指定环境，可以在配置文件中添加环境变量，根据环境变量进行不同的配置。示例代码如下：
-- -------------------- ---- -------
----- ---------------- - -------------------------------
--- -----------
-- --------------------- --- ------------- -
---------- - -
------- -
----- -----------------------
----- ---
--------- ---------------------------
--------- ---------------------------
----- --------------
--
--------- -------
-----
--
- ---- -
---------- - -
------- -
----- -----------------
----- ---
--------- ---------------------
--------- ---------------------
----- --------------
--
--------- -------
-----
--
-
-------------- - -
-----
-------- -
--- ----------------------------
-
-----
--总结
以上就是使用 webpack-sftp 进行自动上传的方法。在实际开发中，我们可以根据需求进行配置，将打包结果自动上传到测试环境或生产环境上，提高了开发效率。
-- -------------------- ---- -------
----- ---------------- - -------------------------------
-------------- - -
-----
-------- -
--- ------------------
------- -
----- ------------
----- ---
--------- ----------------
--------- ----------------
----- --------------
--
--------- -------
-------- -------------
------------- -- -- -
--------------------- ------- -----------
-- -- ---------
--
------------ ---- -- -
------------------- ------------
-- -- ---------
-------
-
--
-
-----
--来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055e9b81e8991b448dbf10