QiNiu-Upload-Plugin

一款打包时根据远端文件对比自动上传所需资源到七牛云的 webpack 插件。

起因

开源的七牛云 webpack 上传插件基本都是在afterEmit钩子上将打包后的 assets 增量上传到七牛云，然后通过修改publicPath的方式将上传后 assets 的 src 替换成用户的 cdn 地址。但这样做会有一些痛点：

• 增量上传资源，使用 hash 文件名时会在云端留下大量冗余文件。
• 每次都会上传所有用户需要上传的的资源，即使在云端存在。
• 打包后在 dist 目录下存在无用资源（已上传到云端）。
• 通过publicPath修改引用前缀，则所有本地资源都必须上传到指定 cdn，包括 css/js 文件。

因此，我决定针对这些痛点自己撸一个上传插件

Use

yarn add qiniu-upload-webpack-plugin -D

const QiNiuUploadPlug = require('qiniu-upload-webpack-plugin')

module.exports = {
    ...,
    plugin: [
        new QiNiuUploadPlug({
            host: '',  // cdn域名 必填
            dirname: "", // 项目前缀 必填
            bk: '', // 七牛云bucket 必填
            ak: '', // 七牛云登陆 ak 必填
            sk: '', // 七牛云登陆 sk 必填
            limit: 100, // 超过100字节的文件才上传 默认100
            mimeType: [".jpg", ".png", ".gif", ".svg", ".webp"], // 上传的文件后缀（public模式无效）
            excludeType: [".html", ".json", ".map"], // 不上传的文件后缀
            zone: null, // 储存机房 Zone_z0华东 Zone_z1华北 Zone_z2华南 Zone_na0北美
            includes: "/", // 筛选包含的路径
            excludes: [], // 排除的路径
            maxFile: 100, // 单次最大上传数量
            increment: true, // 是否是增量上传，默认为true，非增量上传时会删除云端dirname下旧的无用文件
            execution: null, // 是否开启插件，默认情况下只有production环境执行插件上传任务
            mode: "pic" // 模式 public为上传全部资源，会替换掉项目的publicPath
        })
    ]
}

Options

| 字段名 | 类型 | 描述 | 默认值 | | --------- | -------- | ----------------------------------------------------------------------------------------------------------- | ----------------------------------------- | | ak | string | 七牛 accessKey | - | | sk | string | 七牛 secretKey | - | | bk | string | 对象存储 bucket | - | | host | string | 用于访问 DNS 资源的域名 | - | | dirname | string | 存储文件时使用的文件夹前缀 | my-qiniu | | limit | number | 超过 limit 字节的文件才上传 | 100 | | mimeType | string[]] | 需要上传的文件后缀 （public模式无效） | [".jpg", ".png", ".gif", ".svg", ".webp"] | false | | excludeType | string[]] | 需要排除的文件后缀 （public有效） | [".html", ".json", ".map"] | false | | excludes | string[] | 选择哪些路径不需要上传 | - | | includes | string | 筛选包含的路径 | / | | maxFile | number | 单次最大上传数量 | 100 | | increment | boolean | 是否增量上传，开启后会删除云端无用旧文件 | true | | execution | boolean | 是否强制开启插件，默认情况下只有 production 环境执行插件上传任务 | - | | mode | string | 上传模式，public 为上传全部资源，会替换掉项目的 publicPath | pic |

Tips

为每个项目定义一个命名空间，以命名空间为模块来控制云端文件，可以实现上传前置检查，优化上传。 非 publish 模式下会在normalModuleLoader阶段为符合条件的资源添加一个解析 loader，通过 loader 更改文件的 src，避免修改publicPath，只上传需要上传的文件。

• 每个项目在七牛云上会配置一个命名空间，如/qiniu/your-asset.jpg
• 无需配置publicPath
• 上传前会先检查云端是否有相同文件，如果没有则不上传
• 每次上传会删除云端无用文件，保持与项目同步
• 打包后会将 output 目录下已上传到云端的本地资源删除，避免服务器出现无用文件

UploadStatus

打包过程中控制台会出现[QiNiu Plugin]开头的 log, -号为删除成功的资源(黄色文字为云端资源，蓝色为本地)， +号为上传成功的资源

1.4.3 支持 Nuxt 打包