让webpack自动上传静态资源到阿里云oss

最新推荐文章于 2024-10-12 15:28:05 发布

转载最新推荐文章于 2024-10-12 15:28:05 发布 · 3.2k 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5c9dfd7cf265da30b8177d82

文章标签：

#webpack #javascript #ViewUI

本文介绍如何使用webpack-aliyun-oss插件将webpack打包后的静态资源自动上传至阿里云OSS。通过安装并配置该插件，可以指定上传文件类型、路径及自定义文件头等。

我们在使用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) {
      // some operations to filePath
      return '/new/path/to/file.js';
    },
    setHeaders(filePath) {
      // some operations to filePath
      // return false to use default 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',
    region: 'your region',
    accessKeyId: 'your key',
    accessKeySecret: 'your secret',
    bucket: 'your bucket',
    setOssPath(filePath) {
      // some operations to filePath
      return '/new/path/to/file.js';
    },
    setHeaders(filePath) {
      // some operations to filePath
      return {
        'Cache-Control': 'max-age=31536000'
      }
    }
}).apply(); 
复制代码

插件配置项：

from: 上传哪些文件，支持类似gulp.src的glob方法，如'./build/**', 可以为glob字符串或者数组。
- 作为插件使用时：可选，默认为output.path下所有的文件。
- 独立使用时：必须，否则不知道从哪里取图片：）
dist: 上传到oss哪个目录下，默认为oss根目录。可作为路径前缀使用。
region: 阿里云上传区域
accessKeyId: 阿里云的授权accessKeyId
accessKeySecret: 阿里云的授权accessKeySecret
bucket: 上传到哪个bucket
timeout: oss超时设置，默认为30秒(30000)
verbose: 是否显示上传日志，默认为true
deletOrigin: 上传完成是否删除原文件，默认false
deleteEmptyDir: 如果某个目录下的文件都上传到cdn了，是否删除此目录。deleteOrigin为true时候生效。默认false。
setOssPath: 自定义上传路径的函数。接收参数为当前文件路径。不传，或者所传函数返回false则按默认路径上传。(默认为output.path下文件路径)
setHeaders: 配置headers的函数。接收参数为当前文件路径。不传，或者所传函数返回false则不设置header。
test: 测试，仅显示要上传的文件，但是不执行上传操作。默认false