在 Web 开发中，使用 webpack 打包和上传静态资源是常见的操作。然而，手动进行这些操作既耗时又易错。为了解决这个问题，我们可以使用一个 npm 包——eassy-webpack-upload 来自动化这些任务。本文将介绍如何使用 eassy-webpack-upload。
安装
打开命令行工具，进入你的项目根目录并运行以下命令，即可安装 eassy-webpack-upload：
npm install eassy-webpack-upload --save-dev
配置
安装完成后，在项目根目录中添加一个名为 upload.config.js 的文件，并在其中添加以下代码：
-- -------------------- ---- -------
-------------- - -
--------- -
------- --------------- -- -------- -- --
------- --- -- --- -----
----------- ----------- -- --------
----------- ----------- -- -------
------- --------------- -- ---------
--
-------- -
------- ---------- -- -------------- ---- ------------------
-
--以上配置项含义如下：
server.host: 你的服务器域名或 IP 地址；server.port: ssh 服务的端口；server.username: 你的服务器用户名；server.password: 你的服务器密码；server.path: 上传文件的目标路径；local.path: 本地需要上传的文件路径，支持 Glob 模式。
修改 webpack 配置文件
在 webpack 配置文件中添加以下代码：
-- -------------------- ---- -------
----- ----------------- - --------------------------------
----- ------------ - ------------------------------
-------------- - -
-- ---
-------- -
-- ---
--- --------------------------------
--
--使用
执行 npm run build 将项目打包生成 dist 目录后，执行以下命令即可将打包好的文件上传至服务器：
npm run upload
示例代码
一个完整的示例代码可以参考以下示例：
upload.config.js:
-- -------------------- ---- -------
-------------- - -
--------- -
------- --------------- -- -------- -- --
------- --- -- --- -----
----------- ----------- -- --------
----------- ----------- -- -------
------- --------------- -- ---------
--
-------- -
------- ---------- -- -------------- ---- ------------------
-
--webpack.config.js:
-- -------------------- ---- -------
----- ----------------- - --------------------------------
----- ------------ - ------------------------------
-------------- - -
-- ---
-------- -
-- ---
--- --------------------------------
--
--package.json:
-- -------------------- ---- -------
-
------- -------------
---------- --------
---------- -
-------- -------- ------ ------------
--------- ----- --------------------------------------------------
--
--------------- -
---------- ---------
--
------------------ -
----------------------- --------
-
-以上就是使用 eassy-webpack-upload 的全部内容，它能够帮助我们简化上传静态资源的过程，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056d1281e8991b448e6d0c