search

borenXue / webpack-alioss-plugin

阿里 oss-webpack 自动上传插件
MIT License
46 stars 8 forks source link
alioss oss plugin webpack webpack-plugin webpack2

readme

webpack-alioss-plugin

Travis CI node version 更新记录 测试报告 eslint 报告

阿里云 OSS 上传插件, 可在 webpack 打包结束后将来 webpack 生成的文件自动上传到 OSS 中。

支持 webpack 3、4、5

特色

最佳实践:

安装

npm install -D webpack-alioss-plugin

使用示例

注意: 需修改 webpackConfig.output.publicPath 为prefix oss 路径对应的访问 url, eg: '//res.xueboren.com/auto_upload_ci/your-project-name/'

用法一: 结合环境变量 (推荐)

// 先在 CI 的构建环境中设置以下环境变量:

// WEBPACK_ALIOSS_PLUGIN_ACCESS_KEY_ID 对应配置项 accessKeyId
// WEBPACK_ALIOSS_PLUGIN_ACCESS_KEY_SECRET 对应配置项 accessKeySecret
// WEBPACK_ALIOSS_PLUGIN_BUCKET 对应配置项 bucket
// WEBPACK_ALIOSS_PLUGIN_REGION 对应配置项 region
// (可选, 默认为 'auto_upload_ci') WEBPACK_ALIOSS_PLUGIN_OSS_BASE_DIR 对应配置项 ossBaseDir

const AliOSSPlugin = require('webpack-alioss-plugin')

webpackConfig.plugins.push(new AliOSSPlugin())

用法二: 设置配置项

const AliOSSPlugin = require('webpack-alioss-plugin')

webpackConfig.plugins.push(new AliOSSPlugin({
  auth: {
    accessKeyId: '', // 在阿里 OSS 控制台获取
    accessKeySecret: '', // 在阿里 OSS 控制台获取
    region: 'oss-cn-hangzhou', // OSS 服务节点, 示例: oss-cn-hangzhou
    bucket: 'abc', // OSS 存储空间, 在阿里 OSS 控制台获取
  },
  ossBaseDir: 'auto_upload_ci',
  project: 'my-project-name', // 项目名(用于存放文件的直接目录)
}))

使用示例 - vue.config.js 示例

const WebpackAliossPlugin = require('webpack-alioss-plugin');

const isProduction = process.env.NODE_ENV === 'production';

module.exports = {
  publicPath: isProduction ? '//res.xueboren.com/auto_upload_ci/your-project-name/' : '',
  configureWebpack: {
    plugins: isProduction ? [
      new WebpackAliossPlugin(),
    ] : [],
  },
};

参数说明

为了防止 OSS 的 accessKey 及 accessKeySecret 被提交到代码仓库, 本插件提供了环境变量的支持, 所有参数及其环境变量对应关系参考下表。 构建函数中的参数优先级大于环境变量

参数列表如下所示:

构造参数 环境变量 默认值 说明
accessKeyId WEBPACK_ALIOSS_PLUGIN_ACCESS_KEY_ID 空 OSS 访问 key
accessKeySecret WEBPACK_ALIOSS_PLUGIN_ACCESS_KEY_SECRET 空 OSS 访问 secret
bucket WEBPACK_ALIOSS_PLUGIN_BUCKET 空 OSS 存储空间
region WEBPACK_ALIOSS_PLUGIN_REGION 空 OSS 服务节点
exclude - /.*\.html$/ 即匹配该正则的文件名 不会被上传到 OSS
retry - 3 上传失败后重试次数, 0 代表不重试
gzip - true 是否在上传前进行 gzip 压缩
existCheck - true 上传前是否先检测已存在(已存在则不重复上传, 不存在才进行上传)
enableLog WEBPACK_ALIOSS_PLUGIN_ENABLE_LOG false 是否输出详细的日志信息
ignoreError WEBPACK_ALIOSS_PLUGIN_IGNORE_ERROR false 上传过程中出现错误是否继续 webpack 构建
removeMode WEBPACK_ALIOSS_PLUGIN_REMOVE_MODE true 生成的文件自动上传至 OSS 后, 是否删除本地的对应文件
prefix(已弃用) WEBPACK_ALIOSS_PLUGIN_PREFIX false 目录前缀, 文件会上传到该指定目录下, 请确保 accessKey 有该目录的写权限
ossBaseDir WEBPACK_ALIOSS_PLUGIN_OSS_BASE_DIR auto_upload_ci OSS 中存放上传文件的一级目录名
project - 默认会自动读取 package.json 中的 name OSS 中存放上传文件的二级目录, 一般为项目名
options - undefined 对象类型. 可用于设置文件的请求头、超时时间等
envPrefix - '' 字符串类型. 环境变量key的前缀(针对所有相关的环境变量)