borenXue / Webpack Alioss Plugin
Licence: mit
阿里 oss-webpack 自动上传插件
Stars: ✭ 35
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Webpack Alioss Plugin
Serverless Plugin Webpack
Serverless Plugin Webpack
Stars: ✭ 72 (+105.71%)
Mutual labels: webpack, webpack2, plugin
Svg Sprite Loader
Webpack loader for creating SVG sprites.
Stars: ✭ 1,822 (+5105.71%)
Mutual labels: webpack, webpack2, webpack-plugin
Webpack Core Usage
webpack2完整系列课程,欢迎阅读。同时欢迎移步我的react全家桶文章全集: https://github.com/liangklfangl/react-article-bucket
Stars: ✭ 94 (+168.57%)
Mutual labels: webpack, webpack2, webpack-plugin
Dotenv Webpack
A secure webpack plugin that supports dotenv and other environment variables and only exposes what you choose and use.
Stars: ✭ 1,022 (+2820%)
Mutual labels: webpack, webpack-plugin, plugin
Webpack Cdn Plugin
A webpack plugin that use externals of CDN urls for production and local node_modules for development
Stars: ✭ 306 (+774.29%)
Mutual labels: webpack, webpack2, webpack-plugin
Fork Ts Checker Webpack Plugin
Webpack plugin that runs typescript type checker on a separate process.
Stars: ✭ 1,343 (+3737.14%)
Mutual labels: webpack, webpack-plugin, plugin
Everything Is A Plugin
Everything is a Plugin: Mastering webpack from the inside out. NgConf 2017
Stars: ✭ 123 (+251.43%)
Mutual labels: webpack, webpack2, webpack-plugin
Webpack.js.org
Repository for webpack documentation and more!
Stars: ✭ 2,049 (+5754.29%)
Mutual labels: webpack, webpack2, webpack-plugin
Html Res Webpack Plugin
plugin for generating html in webpack
Stars: ✭ 170 (+385.71%)
Mutual labels: webpack, webpack2, webpack-plugin
Multipage Webpack Plugin
A plugin that makes handling templates and asset distribution for multi-page applications using webpack trivial
Stars: ✭ 168 (+380%)
Mutual labels: webpack, webpack2, webpack-plugin
Webpack Parallel Uglify Plugin
A faster uglifyjs plugin.
Stars: ✭ 456 (+1202.86%)
Mutual labels: webpack, webpack-plugin, plugin
Browser Sync Webpack Plugin
Easily use BrowserSync in your Webpack project.
Stars: ✭ 356 (+917.14%)
Mutual labels: webpack, webpack2, webpack-plugin
Offline Plugin
Offline plugin (ServiceWorker, AppCache) for webpack (https://webpack.js.org/)
Stars: ✭ 4,444 (+12597.14%)
Mutual labels: webpack, webpack-plugin, plugin
Error Overlay Webpack Plugin
Catch errors with style 💥✨
Stars: ✭ 821 (+2245.71%)
Mutual labels: webpack, webpack-plugin
Slinky
A light-weight, responsive, mobile-like navigation menu plugin
Stars: ✭ 649 (+1754.29%)
Mutual labels: webpack, plugin
Prerender Spa Plugin
Prerenders static HTML in a single-page application.
Stars: ✭ 7,018 (+19951.43%)
Mutual labels: webpack, webpack-plugin
Node Addon Loader
A loader for node native addons
Stars: ✭ 17 (-51.43%)
Mutual labels: webpack, webpack2
Duplicate Package Checker Webpack Plugin
🕵️ Webpack plugin that warns you when a build contains multiple versions of the same package
Stars: ✭ 635 (+1714.29%)
Mutual labels: webpack, webpack-plugin
Skpm
💎📦 A utility to build and publish Sketch plugins
Stars: ✭ 890 (+2442.86%)
Mutual labels: webpack, plugin
webpack-alioss-plugin
阿里云 OSS 上传插件, 可在 webpack 打包结束后将来 webpack 生成的文件自动上传到 OSS 中。
支持 webpack 3、4、5
特色
- 上传文件后, 可删除该文件(默认开启) - 避免将无用文件上传至服务器
- 上传失败后自动重试 (默认重试3次)
- gzip 压缩后再上传 (默认开启)
- CDN 全局 gzip 是否开启不影响该功能 - 若上传的文件的 header 设置为 gzip, 则 CDN 不会再次对该文件进行 gzip 压缩
- 上传前添加检测机制
- 若已存在, 则可不重复上传
- 对于类似
abc.js
这种不带 hash 值的文件, 可通过existCheck: false
来取消该功能
最佳实践:
- 将 webpack 生成的所有文件 (除了 html、mainfest 文件外) 自动上传至 OSS 中, 并通过阿里 CDN 来访问上传的文件
- webpack 自动生成的
js
、css
文件设置hash
值, eg:detail-question.34d71b4.js
- CDN 可设置为允许使用缓存, 提高加载速度
- 个人服务器或企业服务器只发布
html
文件 - 体积较小的图片(300KB 以下)直接使用 webpack 的
url-loader
自动打包到 js 文件中(base64) - 体积较大的图片(300KB 以上)手动上传至 OSS 中, 或通过服务端接口自动上传至 OSS
- OSS 安全: 使用阿里推荐的访问控制 ACL 来限制某个
accessKey
只能访问指定文件夹
安装
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 后, 是否删除本地的对应文件 |
|
WEBPACK_ALIOSS_PLUGIN_PREFIX |
accessKey 有该目录的写权限 |
|
ossBaseDir | WEBPACK_ALIOSS_PLUGIN_OSS_BASE_DIR |
auto_upload_ci |
OSS 中存放上传文件的一级目录名 |
project | - | 默认会自动读取 package.json 中的 name
|
OSS 中存放上传文件的二级目录, 一般为项目名 |
options | - | undefined | 对象类型. 可用于设置文件的请求头、超时时间等 |
envPrefix | - | '' |
字符串类型. 环境变量key的前缀(针对所有相关的环境变量) |
-
prefix:出于安全考虑推荐不使用根目录, 只给该accessKey
赋予某个子文件夹的权限 - ignoreError: 如果上传过程中出现错误是否继续 webpack 构建
- true: 忽略错误, 继续构建, webpack 不会报错
- false: 中止构建, webpack 构建会以失败结束
- removeMode: 生成的文件自动上传至 OSS 后, 是否删除本地的对应文件
- true: 删除 (默认删除)
- false: 不删除
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].