Qiniu-upload-webpack-plugin NPM

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，只上传需要上传的文件。