Webpack upload Tencent cloud

introduce

Our company’s previous projects have always been packaged and uploaded to Qiniu. However, recently, the packaged files were always unable to be found, so the intermediate process was omitted. Finally, we decided to put the project files on Tencent cloud.

Tencent cloud preparation

• Enter Tencent cloud console.
• Open the object storage.
• Click Bucket List – Create bucket.
• In the bucket list, click the newly created bucket. – Click Permission Management on the right. – Bucket Access Permission – Public Read Private Write.

If there is a need for CDN acceleration.

• Click on the right side of domain name and Transport Management – Custom CDN Accelerated domain name – Add domain name (this step to see if you want to use the default CDN accelerated domain name or custom).
• If it is a custom accelerated domain name, in addition to the HTTPS configuration of the domain name, Tencent cloud also need to configure:
  • Console – Click Content Distribution Network – Certificate Management on the left – Configure the corresponding certificate. (I didn’t know I had to do this step at first. After uploading the file to Tencent Cloud, I couldn’t access it until I submitted the work order, which delayed me for several hours.)

The installation

npm i tencent-cloud-webpack-plugin
Copy the code

Method of use

Supported configuration items:

• secretId COS SecretId
• secretKey COS SecretKey
• bucketCOS stores the object name in the format of object name plus application ID, for example:bucket-1250000000
• regionCOS storage area, seeThe official documentation
• pathStorage path, default is[hash], you can also specify the hash length, for example:[hash:8]
• excludeOptional, exclude specific files, regular expressions, such as:/index\.html$/
• includeOptional, specify the file to upload, regular expression, for example:/app\.js$/
• batchThis parameter is optional. The default value is 20

Note: Webpackoutput.publicPathPoint to a COS (or custom) domain name address

/ / introduction
const CosPlugin = require('cos-webpack')

// Here the project name plus the timestamp is used to distinguish the identity in Tencent cloud
const fileName = 'projectName/' + new Date().getTime()

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

// Webpack configuration
module.exports = {
 output: {
    publicPath: IS_PROD ? defaultSettings.tencent.publicPath + fileName + '/dist' : '/'.outputDir: 'dist'.assetsDir: 'static',},plugins: [
   cosPlugin
   // ...
 ]
 // ...
}
Copy the code

The sample

The sample project