webpack-plugin-oss-pro
TypeScript icon, indicating that this package has built-in type declarations

1.0.2 • Public • Published

webpack-plugin-oss-pro

一个可以将打包好的资源文件上传到阿里云 OSS 并且修改代码中资源文件 CND 地址的 Webpack 插件

本插件基于webpack5实现,使用时请检查webpack@vue/cli-service版本是否>=5

传送门 vite版

Install 安装

npm i webpack-plugin-oss-pro -D

Options 配置参数

  • cdnHost: 必传。上传后要替换的资源文件 CDN 域名
  • region: 必传。阿里云上传区域
  • accessKeyId: 必传。阿里云的授权 accessKeyId
  • accessKeySecret: 必传。阿里云的授权 accessKeySecret
  • bucket: 必传。上传到哪个 bucket
  • from: 必传。上传哪些文件,支持类似 gulp.src 的 glob 方法,如'./build/**', 为 glob 字符串。默认./dist/img/**
  • dist: 上传到 oss 哪个目录下,默认为 oss 根目录。可作为路径前缀使用。
  • timeout: oss 超时设置,默认为 30 秒(30000)
  • overwrite: 是否覆盖 oss 同名文件。默认 true。
  • deleteOrigin: 上传完成是否删除原文件,默认 false。
  • setOssPath: 自定义每个文件上传路径。接收参数为当前文件路径。不传,或者所传函数返回 false 则按默认方式上传。
  • test: 测试,仅查看文件和上传路径,但是不执行上传操作。默认 false。
  • quitWpOnError: 出错是否中断打包。默认 false。
  • parallel: 并发上传个数。默认 5
  • fileSuffix: 需要上传的文件后缀,默认['jpg', 'jpeg', 'png', 'gif', 'svg', 'webp', 'ico', 'bmp', 'webm', 'avi', 'mp4', 'mp3', 'flv', 'mov']

注意: accessKeyId, accessKeySecret 很重要,注意保密!!!

Vue 例子

// vue.config.js
const { defineConfig } = require("@vue/cli-service");
const WebpackPluginOssPro = require("webpack-plugin-oss-pro");

const prod = process.env.NODE_ENV === "production";

module.exports = defineConfig({
  configureWebpack: {
    plugins: [
      // 打包时才加载插件
      prod &&
        new WebpackPluginOssPro({
          cdnHost: "https://cdn.xxx.com", //设置cdn域名
          from: "./dist/img/**", // 需要上传到oss的文件夹
          dist: "static", // 需要上传到oss上的给定文件目录
          region: "oss-xx-xx-1",
          accessKeyId: "xxxxxxxxxxxx",
          accessKeySecret: "xxxxxxxxxxxx",
          bucket: "xxxxxxxxx",
        }),
    ].filter(Boolean),
  },
});

Webpack 例子

// webpack.config.js
const WebpackPluginOssPro = require("webpack-plugin-oss-pro");

const prod = process.env.NODE_ENV === "production";

module.exports = {
  plugins: [
    // 打包时才加载插件
    prod &&
      new WebpackPluginOssPro({
        cdnHost: "https://cdn.xxx.com", // 设置cdn域名
        from: "./dist/img/**", // 上传那个文件或文件夹
        dist: "static", // 需要上传到oss上的给定文件目录
        region: "oss-xx-xx-1",
        accessKeyId: "xxxxxxxxxxxx",
        accessKeySecret: "xxxxxxxxxxxx",
        bucket: "xxxxxxxxx",
      }),
  ].filter(Boolean),
};

Package Sidebar

Install

npm i webpack-plugin-oss-pro

Weekly Downloads

2

Version

1.0.2

License

MIT

Unpacked Size

20.1 kB

Total Files

7

Last publish

Collaborators

  • qiu_wenxing