webpack upload to qiniu

最新推荐文章于 2022-05-18 18:28:29 发布

转载最新推荐文章于 2022-05-18 18:28:29 发布 · 158 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/codingBingo/blog/829373

文章标签：

#webpack #python #ViewUI

本文介绍了如何使用qn-webpack插件配置七牛云存储服务。通过设置AccessKey、SecretKey等参数，可以轻松地将文件上传到指定的七牛存储空间。文章还提供了配置示例，并指出了需要注意的细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

之前有介绍过一篇关于webpack上传文件的文章,但是如果要配置qiniu的话,会有很多坑

所以又去网上找了找,发现这个

qn-webpack

挺好用的

使用方法

支持的配置项:

accessKey 七牛 AccessKey
secretKey 七牛 SecretKey
bucket 七牛存储对象名称
autoZone 是否自动选择上传域名节点, 默认为 true
path 存储路径, 默认为 [hash]

注: Webpack 的 output.publicPath 要指向七牛云（或自定义的）域名地址

// 引入
const QiniuPlugin = require('qn-webpack');

// 配置 Plugin
const qiniuPlugin = new QiniuPlugin({
  accessKey: 'my-access-key',
  secretKey: 'my-secret-key',
  bucket: 'my-bucket',
  path: '[hash]/'
});

// Webpack 的配置
module.exports = {
 output: {
    // 此处为七牛提供的域名(http://7xqhak.com1.z0.glb.clouddn.com) 加上 path([hash]/)
    publicPath: "http://7xqhak.com1.z0.glb.clouddn.com/[hash]/"
    // ...
 },
 plugins: [
   qiniuPlugin
   // ...
 ]
 // ...
}

Preview