qiniu-webpack-plugin

把 Webpack 打包出来的 assets 传到 七牛云存储上。

安装

npm install webpack-plugin-qiniu --save-dev

引入

var QiniuPlugin = require('webpack-plugin-qiniu');

配置

• ACCESS_KEY,SECRET_KEY, bucket 与七牛云设置一致
• path 存储的路径，默认为 [hash]
• include 可选项。你可以选择上传的文件，比如['main.js']``或者[/main/]`

另外

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

// 这里配置 Plugin
var qiniuPlugin = new QiniuPlugin({
  ACCESS_KEY: '',
  SECRET_KEY: '',
  bucket: 'static-xxx-com',
  path: '[hash]',
});

// 这里是 Webpack 的配置
module.exports={
 output:{
    // 这里是七牛的域名加上 Webpack 的 hash
    publicPath:"http://7xs30h.com1.z0.glb.clouddn.com/[hash]/"
    // ..
 },
 plugins:[
   qiniuPlugin
   // ...
 ]
 // ...
}

示例代码

https://github.com/wyvernnot/qiniu-webpack-plugin/tree/master/example

该例子演示了

• React + ES6 + Bootstrap 前端项目的编译执行
• SoureceMap 存储
• Webfont 存储
• 图片 存储
• 缓存处理
• 开发和产品环境切换

版权声明

Qiniu 是上海七牛信息技术有限公司的注册商标， qiniu-webpack-plugin 是本人自己写的模块，非官方，采用 MIT 开源协议发布。

Better Option

如果你的项目文件比较多，实际上用官方的 qshell 要比 Webpack 插件好用的多得多。 当然，你也可以用 npm install qshell-cli 直接安装这个工具。