Skip to content

Latest commit

 

History

History
79 lines (58 loc) · 2.92 KB

README.md

File metadata and controls

79 lines (58 loc) · 2.92 KB

qiniu-webpack-plugin

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

安装

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

引入

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

配置

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

另外

  • Webpack 的 output.publicPath 要指向七牛云(或自定义的)域名地址
// 这里配置 Plugin
var qiniuPlugin = new QiniuPlugin({
  ACCESS_KEY: '',
  SECRET_KEY: '',
  bucket: 'my-qiniu-webpack',
  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 直接安装这个工具。