起因

市面上的插件不维护，难用，不支持最新的webpack5配置，自己技术栈的vue-cli5已经升级到webpack5，所以需要开发一款兼容最新脚手架的打包七牛云插件 自己取巧设计并开发一个增量文件上传功能，纯前端实现方式。主要是为了解决每次打包不管文件变没变都把所有目录下的文件一起丢上去，项目大了很费时，而且也占用了七牛云刷新文件和上传文件的时间。

大致的思路：

打包后本地生成一个资源映射文件=>跟线上的文件做对比=>查找差异项=>对不在云上的资源进行上传和刷新

能有效减少打包体积，项目越大效果越显著，因为大部分时间是在上传几百上千的资源，以及对他们进行逐个刷新上

github地址 webpack-plugin-qiniu-upload

npm地址 webpack-plugin-qiniu-upload

功能特点

☁️ 支持最新的sdk 七牛云上传，适配最新的vue脚手架cli4.0及5.0以上版本

💪 适配最新的vue脚手架cli4.0及5.0以上版本，支持webpack5的配置

💪 支持webpack5的配置

🚀 支持增量文件上传，告别所有资源重复上传并刷新文件的烦恼和等待时间

安装

  pnpm add webpack-plugin-qiniu-upload -D

  yarn add webpack-plugin-qiniu-upload -D

使用示例

vue.config.js

const UploadQiNiuPlugin = require("webpack-plugin-thirdparty-upload");

module.exports = {
  ...,
  plugins: [
    new UploadQiNiuPlugin({
      qiniuAccessKey: "xxxx",
      qiniuSecretKey: "xxxxx",
      qiniuBucket: "xxx",
      qiniuZone: "Zone_z0",
      enabledRefresh: true,
      publicPath: 'https://www.yourdomain.com/',
      uploadTarget: path.resolve(__dirname, './dist'),
      appName: 'xxxx',
      fileLogPath: 'log/'
    }),
  ],
};

Options

qiniu cloud Options

Name	Type	Default	Description
qiniuAccessKey	{String}	null	Your Qiniu AccessKey
qiniuSecretKey	{String}	null	Your Qiniu SecretKey
qiniuBucket	{String}	null	Your Qiniu Bucket Name
qiniuZone	{String}	null	Your Qiniu zone code
enabledRefresh	{Boolean}	false	Is enable refresh the file on Qiniu Clound after file upload
excludeHtml	{Boolean}	true	Is exclude html file
onlyRefreshHtml	{Boolean}	false	only refresh html file (eg: _/demo/index.html + _/demo/), throws an exception in the case of a failure.
prefixPath	{String}	-	prefix path for the file
fileLogPath	{String}	log/	Provide a directory where log file should be stored
publicPath	{String}	webpackConfig.output.publicPath	你打包后的资源所带的前缀路径
uploadTarget	{String}	webpackConfig.output.path	待上传的文件夹目录
appName	{Number}	Date.now()	可选，用于生成资源映射文件日志的文件名

[qiniuZone]配置参考(developer.qiniu.com/kodo/sdk/12…):

Name	value
华东	"Zone_z0"
华北	"Zone_z1"
华南	"Zone_z2"
北美	"Zone_na0"

待办事项

• 支持增量更新的文件上传
• 支持日志文件清理或拉取范围筛选