webpack静态资源上传到CDNS (阿里云 OSS,亚马逊 AWS S3,七牛云 Qiniu Cloud Kodo)webpack-plugin-cdns

webpack-plugin-cdns 是一个 Webpack 插件,用于实现将前端项目中的资源(如 JavaScript、CSS、图片等)上传到 CDN(OSS、S3、Kodo) 服务器。从而完成资源的 CDN 加速。

在开发前端项目时,我们通常会将静态资源放在本地服务器上,并在 HTML 文件中以相对路径引用它们。然而,当我们将项目部署到生产环境时,为了提高加载速度和稳定性,我们可以将这些静态资源上传到 CDN(内容分发网络)上,并在 HTML 文件中以 CDN 路径引用它们。这样一来,用户在访问网站时可以从离用户物理位置最近的 CDN 节点加载这些资源,提供更快的加载速度和更好的用户体验。

兼容

此插件兼容 webpack 3 4 5 版本。

安装

javascript 复制代码
npm install webpack-plugin-cdns

引入

javascript 复制代码
const WebpackPluginCdns = require('webpack-plugin-cdns')

或者

javascript 复制代码
import WebpackPluginCdns from 'webpack-plugin-cdns'

使用

oss、 s3、kodo 选择其一配置即可,如果多个同时存在,优先级:oss > s3 > kodo。以下是不同 CDN 服务商对应高配置:

阿里云 oss

javascript 复制代码
plugins: [
  ..., // 其他插件
  new WebpackPluginCdns({
    from: ['./dist/**', '!*.html'], // 需要上传的文件; 详细书写规则请查看globby
    dist: '/directory/', // CDN 资源存放目录
    oss: {
      accessKeyId: '', // 阿里云账号的 Access Key ID,用于身份验证
      accessKeySecret: '', // 阿里云账号的 Access Key Secret,用于签名身份验证。
      bucket: '', // 阿里云 OSS 中的存储桶(Bucket)名称,用于存放上传的文件。
      region: '', // 存储桶所在的地域(Region),可以是阿里云的内网或外网地域。
    }
  })
]

亚马逊 s3

javascript 复制代码
plugins: [
  ..., // 其他插件
  new WebpackPluginCdns({
    from: ['./dist/**', '!*.html'], // 需要上传的文件; 详细书写规则请查看globby
    dist: '/directory/', // CDN 资源存放目录
    s3: {
      accessKeyId: '', // AWS(亚马逊云服务)账号的 Access Key ID,用于身份验证。
      secretAccessKey: '', // AWS 账号的 Secret Access Key,用于签名身份验证。
      Bucket: '', // S3 中的存储桶名称,用于存放上传的文件。
      region: '' // 存储桶所在的地域(Region),通常是一个 AWS 区域代码。
    }
  })
]

七牛云 kodo

javascript 复制代码
plugins: [
  ...,
  new WebpackPluginCdns({
    from: ['./dist/**', '!*.html'],
    dist: '/directory/',
    // 七牛云 Kodo
    kodo: {
      accessKey: '',
      secretKey: '',
      bucket: ''
    }
  })
]

修改静态资源请求前缀为CDN地址

具体配置根据项目实际情况配置到静态资源访问路径即可,以下提供两种不同配置方式作为参考:

直接配置 webpack

javascript 复制代码
module.exports = {
  output: {
    publicPath: '您的CDN地址'
  }
}

在 Vue 项目中,通过配置 vue.config.js 文件来自定义 Vue CLI 的构建配置:

javascript 复制代码
module.exports = {
  publicPath: '您的CDN地址'
}

总结

以上就是静态资源上传到 CDN 的全部内容了,其实也没什么难点,让我们在项目中使用起来吧。

相关推荐
光影少年5 小时前
webpack打包优化
webpack·掘金·金石计划·前端工程化
百思可瑞教育2 天前
Vue.config.js中的Webpack配置、优化及多页面应用开发
前端·javascript·vue.js·webpack·uni-app·北京百思教育
歪歪1002 天前
webpack 配置文件中 mode 有哪些模式?
开发语言·前端·javascript·webpack·前端框架·node.js
歪歪1002 天前
如何配置Webpack以实现按需加载模块?
开发语言·前端·webpack·node.js
谢尔登3 天前
【Webpack】模块联邦
前端·webpack·node.js
XINVRY-FPGA3 天前
XCKU15P-2FFVA1760I AMD 赛灵思 Xilinx Kintex UltraScale+ FPGA
arm开发·嵌入式硬件·阿里云·fpga开发·云计算·硬件工程·fpga
TG_yilongcloud3 天前
阿里云国际代理:怎么保障数据库在凭据变更过程中的安全与稳定?
数据库·安全·阿里云·云计算
Clownseven4 天前
阿里云ECS vs 腾讯云CVM:2核4G服务器性能实测对比 (2025)
服务器·阿里云·腾讯云
TG_yunshuguoji4 天前
阿里云国际代理:如何利用RDS构建高可用、可扩展的数据库架构
服务器·数据库·阿里云·云计算·数据库架构
阿里云云原生4 天前
阿里云可观测 2025 年 8 月产品动态
阿里云·云计算