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

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

gp5251

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

阅读量3.7k

点赞数

分类专栏：插件工具前端文章标签： webpack 插件 aliyunoss 工程化

本文链接：https://blog.csdn.net/gp5251/article/details/88910610

版权

本文介绍了如何通过webpack-aliyun-oss插件实现webpack打包后自动将js、css等静态资源上传到阿里云OSS。配置包括安装插件、设置OSS路径和文件头，以及插件的独立使用方式和各项参数说明。

摘要由CSDN通过智能技术生成

我们在使用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';
    },
    setHeaders(filePath) {
      // 定义当前文件header，可选