webpack5 Qiniu cloud packaging plug-in, supports vue-cli5 construction

cause

The plug-ins on the market are not maintained, difficult to use, and do not support the latest webpack5 configuration. The vue-cli5 of my own technology stack has been upgraded to webpack5 , so I need to develop a packaged Qiniu cloud plug-in that is compatible with the latest scaffolding. Design and develop an add- on. Mass file upload function , pure front-end implementation. The main purpose is to solve the problem of throwing all the files in the directory together every time the package is packaged or not. The project is large and time-consuming, and it also takes up the time for Qiniu Cloud to refresh and upload files.

General idea:

After packaging, generate a resource mapping file locally => compare with online files => find differences => upload and refresh resources that are not on the cloud

It can effectively reduce the packaging volume. The larger the project, the more significant the effect is, because most of the time is uploading hundreds of thousands of resources and refreshing them one by one.

github address
webpack-plugin-qiniu-upload

npm address
webpack-plugin-qiniu-upload

<div align="center">

 <img width="200" height="200"
  src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/469672cbab7a467383665f8eadc4e3a0~tplv-k3u1fbpfcp-zoom-1.image">

<h1>Upload To qiniu cloud webpack|vue-cli-Plugin</h1>
<h1>Qiniu cloud scaffolding packaged and uploaded plugin package, webpack5 and vue-cli4|vue-cli5 plugin</h1>
<p>A plugin upload file to qiniu clound for vue-cli4|vue-cli5</p>

<p align="center">

 <img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ec7cdb7da72f43e8be480a586aa43881~tplv-k3u1fbpfcp-zoom-1.image" alt="npm version" />
<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e60bda97ebf845919b86ee1b3ab5f74a~tplv-k3u1fbpfcp-zoom-1.image" alt="downloads" />

</p>
</div>
<h2 align="center">Features</h2>

☁️ Support the latest sdk Qiniu cloud upload, adapt to the latest vue scaffolding cli4.0 and above version 5.0

💪 Adapt to the latest vue scaffolding cli4.0 and above versions, support webpack5 configuration

💪 Support webpack5 configuration

🚀 Support incremental file upload, say goodbye to the trouble and waiting time of repeated uploading of all resources and refreshing files

<h2 align="center">Install</h2>

 pnpm add webpack-plugin-qiniu-upload -D

 yarn add webpack-plugin-qiniu-upload -D

<h2 align="center">Use example</h2>

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/'
    }),
  ],
};

<h2 align="center">Options</h2>

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	The prefix path of your packaged resources
uploadTarget	{String}	webpackConfig.output.path	Folder directory to be uploaded
appName	{Number}	Date.now()	Optional, the filename used to generate the resource map file log

[qiniuZone] Configuration reference ( https://developer.qiniu.com/kodo/sdk/1289/nodejs ):

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

To Do

• [x] Support incremental update file upload
• [ ] Support log file cleaning or pull range filtering