我们在使用webpack打包好文件后,如果希望webpack可以自动上传静态资源(如js,css等)到阿里云oss上,可以使用webpack-aliyun-oss这款插件,具体方法如下:
首先安装webpack-aliyun-oss插件
$ npm i webpack-aliyun-oss -D
然后修改webpack配置文件
const WebpackAliyunOss = require('webpack-aliyun-oss');
const webpackConfig = {
// ... 省略其他
plugins: [new WebpackAliyunOss({
from: ['./build/**', '!./build/**/*.html'],//排除html文件
dist: 'path/in/alioss',
region: 'your region',
accessKeyId: 'your key',
accessKeySecret: 'your secret',
bucket: 'your bucket',
// 如果希望重新组织上传路径,可以传这个函数
// 否则按构建目录的结构上传
setOssPath(filePath) {
// filePath为当前文件路径,函数应该返回路径+文件名,如/new/path/to/file.js,则最终上传路径为 path/in/alioss/new/path/to/file.js
return '/new/path/to/file.js';
},
// 如果想定义header就传
setHeaders(filePath) {
// 定义当前文件header,可选
return {
'Cache-Control': 'max-age=31536000'
}
}
})]
}
setOssPath和setHeaders可以自定义文件上传路径和文件头,如果没有特殊要求也可以不传,或者函数返回false,默认按output.path下的路径上传。
这样,当打包完成之后即可自动上传阿里云oss了
另外,插件也可以作为独立的上传模块来使用:
const WebpackAliyunOss = require('webpack-aliyun-oss');
new WebpackAliyunOss({
from: ['./build/**', '!./build/**/*.html'],
dist: 'path/in/alioss',
buildRoot: 'build', // 构建目录,如果已传setOssPath,可忽略
region: 'your region',
accessKeyId: 'your key',
accessKeySecret: 'your secret',
bucket: 'your bucket',
// 如果希望重新组织上传路径,可以传这个函数
// 否则按构建目录的结构上传
setOssPath(filePath) {
// filePath为当前文件路径,函数应该返回路径+文件名,如/new/path/to/file.js,则最终上传路径为 path/in/alioss/new/path/to/file.js
return '/new/path/to/file.js';
},
// 如果想定义header就传
setHeaders(filePath) {
// 定义当前文件header,可选
return {
'Cache-Control': 'max-age=31536000'
}
}
}).apply();
插件配置项:
from
: 上传哪些文件,支持类似gulp.src的glob方法,如'./build/**', 可以为glob字符串或者数组。- 作为插件使用时:可选,默认为output.path下所有的文件。
- 独立使用时:必须,否则不知道从哪里取图片:)
dist
: 上传到oss哪个目录下,默认为oss根目录。可作为路径前缀使用。region
: 阿里云上传区域accessKeyId
: 阿里云的授权accessKeyIdaccessKeySecret
: 阿里云的授权accessKeySecretbucket
: 上传到哪个buckettimeout
: oss超时设置,默认为30秒(30000)verbose
: 是否显示上传日志,默认为truedeletOrigin
: 上传完成是否删除原文件,默认falsedeleteEmptyDir
: 如果某个目录下的文件都上传到cdn了,是否删除此目录。deleteOrigin为true时候生效。默认false。setOssPath
: 自定义上传路径的函数。接收参数为当前文件路径。不传,或者所传函数返回false则按默认路径上传。(默认为output.path下文件路径)setHeaders
: 配置headers的函数。接收参数为当前文件路径。不传,或者所传函数返回false则不设置header。test
: 测试,仅显示要上传的文件,但是不执行上传操作。默认false