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 版本。

安装

npm install webpack-plugin-cdns

引入

const WebpackPluginCdns = require('webpack-plugin-cdns')

或者

import WebpackPluginCdns from 'webpack-plugin-cdns'

使用

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

阿里云 oss

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

亚马逊 s3

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

七牛云 kodo

plugins: [...,new WebpackPluginCdns({from: ['./dist/**', '!*.html'],dist: '/directory/',// 七牛云 Kodokodo: {accessKey: '',secretKey: '',bucket: ''}})
]

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

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

直接配置 webpack：

module.exports = {output: {publicPath: '您的CDN地址'}
}

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

module.exports = {publicPath: '您的CDN地址'
}

总结

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