Webpack上传腾讯云

介绍

我们公司之前的项目一直都是打包之后上传七牛，但是最近一段时间总是出现打包文件找不到的情况，中间过程就省略了，最后决定把项目文件放到腾讯云上。

腾讯云准备工作

• 进入腾讯云控制台。
• 打开对象存储。
• 点击存储桶列表-创建存储桶。
• 在存储桶列表里点击刚创建的桶-点击右侧权限管理-存储桶访问权限-公有读私有写。 如果有CDN加速需求的话。
  • 点击右侧域名与传输管理-自定义CDN加速域名-添加域名(这一步看你是想要采用默认CDN加速域名还是自定义的)。
  • 如果是自定义加速域名的话除了域名的HTTPS配置，在腾讯云上还要进行配置:
    • 控制台-点击内容分发网络-左侧证书管理-配置对应的证书。(我开始不知道要做这一步，文件上传到腾讯云之后一直无法访问，后来提了工单才知道，耽误了几个小时)。

安装

npm i tencent-cloud-webpack-plugin

使用方法

支持的配置项:

• secretId COS SecretId
• secretKey COS SecretKey
• bucket COS 存储对象名称，格式为对象名称加应用 ID，如：bucket-1250000000
• region COS 存储地域，参见官方文档
• path 存储路径， 默认为 [hash]，也可以指定 hash 长度，如: [hash:8]
• exclude 可选，排除特定文件，正则表达式，如: /index\.html$/
• include 可选，指定要上传的文件，正则表达式，如: /app\.js$/
• batch 可选，批量上传文件并发数，默认 20

注: Webpack 的 output.publicPath 要指向 COS（或自定义的）域名地址

// 引入
const CosPlugin = require('cos-webpack')

// 这里用项目名加上时间戳用来在腾讯云中区分标识
const fileName = 'projectName/' + new Date().getTime()

// 配置 Plugin
const cosPlugin = new CosPlugin({
    secretId: defaultSettings.tencent.secretId,
    secretKey: defaultSettings.tencent.secretKey,
    bucket: defaultSettings.tencent.bucket,
    region: defaultSettings.tencent.region,
    path: fileName
});

// Webpack 的配置
module.exports = {
 output: {
    publicPath: IS_PROD ? defaultSettings.tencent.publicPath + fileName + '/dist' : '/',
    outputDir: 'dist',
    assetsDir: 'static',
 },
 plugins: [
   cosPlugin
   // ...
 ]
 // ...
}

示例

示例项目