Webpack Google Cloud Storage Plugin

0.9.0 verified Sat Apr 25 auth: no javascript

A Webpack plugin to upload assets to Google Cloud Storage. Current stable version is 0.9.0. It integrates with Webpack's compilation process to automatically upload specified files after each build. Supports configurable file inclusion/exclusion via regex patterns, custom destination paths, metadata, gzip compression, public access, and resumable uploads. Designed for production deployment workflows. Requires Google Cloud Storage credentials. Release cadence is infrequent; last release was on an unspecified date.

Common errors

error Error: Cannot find module '@google-cloud/storage' ↓

cause @google-cloud/storage is not installed or missing as a dependency.

fix

Install the peer dependency: npm install @google-cloud/storage

error TypeError: WebpackGoogleCloudStoragePlugin is not a constructor ↓

cause Plugin was not imported correctly (e.g., using named import instead of default).

fix

Use: import WebpackGoogleCloudStoragePlugin from 'webpack-google-cloud-storage-plugin'

error Error: ENOENT: no such file or directory, open '/path/to/keyfile.json' ↓

cause The key file specified in storageOptions.keyFilename does not exist.

fix

Check the file path and ensure it exists, or use environment variables.

error Error: The API returned an error: Error: The bucket 'my-bucket' does not exist ↓

cause Bucket name in uploadOptions.bucketName does not exist in your GCP project.

fix

Verify the bucket name and ensure it exists in the correct project.

Warnings

deprecated storageOptions.keyFilename is misspelled as 'keyFilename' but in older versions the option was 'keyFileName' (with double 'n'). ↓

fix Use 'keyFilename' (single 'n') as per documentation.

breaking In version 0.8.0, the plugin stopped supporting obsolete options that were previously deprecated. ↓

fix Update to 0.8.0+ and remove any deprecated options.

gotcha The plugin requires @google-cloud/storage as a peer dependency, not automatically installed. ↓

fix Run 'npm install --save @google-cloud/storage'.

gotcha CommonJS require returns the default export directly, not an object with default property in newer versions. ↓

fix Use 'require('...').default' or switch to ES import.

breaking Webpack 4+ requires the plugin to be instantiated with 'new' and passed to plugins array, not as a function. ↓

fix Ensure you use 'new' keyword.

Install

npm install webpack-google-cloud-storage-plugin

yarn add webpack-google-cloud-storage-plugin

pnpm add webpack-google-cloud-storage-plugin

Imports

WebpackGoogleCloudStoragePlugin

wrong

const { WebpackGoogleCloudStoragePlugin } = require('webpack-google-cloud-storage-plugin');

correct

import WebpackGoogleCloudStoragePlugin from 'webpack-google-cloud-storage-plugin'

Default export only. CommonJS require returns the default export directly.

WebpackGoogleCloudStoragePlugin

wrong

const WebpackGoogleCloudStoragePlugin = require('webpack-google-cloud-storage-plugin');

correct

const WebpackGoogleCloudStoragePlugin = require('webpack-google-cloud-storage-plugin').default;

In CommonJS, you need .default because it's an ES module default export.

WebpackGoogleCloudStoragePlugin

wrong

import { WebpackGoogleCloudStoragePlugin } from 'webpack-google-cloud-storage-plugin';

correct

import WebpackGoogleCloudStoragePlugin from 'webpack-google-cloud-storage-plugin';

The plugin is a default export, not a named export.

Quickstart

Basic Webpack config using the Google Cloud Storage plugin with authentication via environment variables and file upload options.

const path = require('path');
const WebpackGoogleCloudStoragePlugin = require('webpack-google-cloud-storage-plugin').default;

module.exports = {
  plugins: [
    new WebpackGoogleCloudStoragePlugin({
      directory: './dist',
      include: ['app.js'],
      exclude: [],
      storageOptions: {
        projectId: process.env.GCS_PROJECT_ID || 'my-project',
        keyFilename: process.env.GCS_KEYFILE || './key.json',
      },
      uploadOptions: {
        bucketName: 'my-bucket',
        destinationNameFn: (file) => path.join('assets', file.path),
        gzip: true,
        makePublic: false,
        resumable: true,
        concurrency: 5,
      },
    }),
  ],
};