cdn-upload-webpack-plugin

A webpack plugin which incrementally uploads assets to a CDN upon build completion

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
cdn-upload-webpack-plugin
000.2.35 years ago5 years agoMinified + gzip package size for cdn-upload-webpack-plugin in KB

Readme

cdn-upload-webpack-plugin
A webpack plugin which incrementally uploads assets to a CDN upon build completion.
Greenkeeper badge npm

Features

  • Incremental upload: when using webpack in watch mode (or webpack-dev-server/webpack-dev-middleware), only newly-emitted assets are uploaded.
  • Prune extraneous assets: assets on the CDN which are no longer present in the webpack build are deleted.
  • Currently supports:
Microsoft Azure Blob storage

Installation

npm install cdn-upload-webpack-plugin --save-dev

Usage

const CdnDeployPlugin = require('cdn-upload-webpack-plugin');

const azureUploadPlugin = new CdnUploadPlugin.Azure({
    // Leave `connection` undefined to use environment variables
    // AZURE_STORAGE_CONNECTION_STRING / AZURE_STORAGE_ACCOUNT / AZURE_STORAGE_ACCESS_KEY
    // i.e. http://azure.github.io/azure-storage-node/global.html#createBlobService__anchor
    // Or define as:
    connection: {
        connectionString: '<your connection string>'
    },
    // or
    connection: {
        storageAccount: '<your storage account>',
        storageAccessKey: '<your access key>'
    },
    // The name of the container on Azure, which will be created if it doesn't exist
    containerName: 'files',
    // The filename prefix to be used for all uploaded assets
    prefix: 'my/test/folder'
});

module.exports = {
    entry: './index.js',
    output: {
        filename: 'bundle.js',
        // Set your publicPath to have chunks loaded via the CDN:
        publicPath: azureUploadPlugin.getPublicPath()
    },
    plugins: [
        azureUploadPlugin
    ]
};

Run webpack, and you should see upload progress logs e.g.
[23:31:33] webpack (95%) - emitting
[23:31:33] webpack (98%) - upload: creating Azure blob container 'files'
[23:31:34] webpack (98%) - upload: listing blobs under 'files/my/test/folder'
[23:31:34] webpack (98%) - upload: creating blob (1/1) 'files/my/test/folder/bundle.js'
[23:31:34] webpack (98%) - upload: uploaded 1 assets
[23:31:34] webpack (98%) - upload: pruned 0 extraneous assets
[23:31:34] webpack (100%)