webpack-upload-plugin

0.25.0 verified Sat May 09 auth: no javascript maintenance

A webpack plugin that uploads JS/CSS/image/font assets to a CDN and replaces local references with CDN URLs. Version 0.25.0 is the latest, works with webpack 3+, but requires explicit configuration for webpack 4 (minimization must be disabled). It does not include its own CDN upload service; users must provide a `cdn` object with an `upload` method. Alternative to other CDN upload plugins, but has known compatibility issues with UglifyJs and requires careful handling of publicPath. Only the plugin owner maintains it; release cadence is sporadic.

Common errors

error TypeError: UglifyJsPlugin is not a function ↓

cause Using UglifyJs plugin with webpack 4 and this plugin, which requires minimize: false

fix

Disable UglifyJs plugin or set optimization.minimize to false.

error Cannot find module 'webpack-upload-plugin' ↓

cause Missing npm installation or incorrect import path

fix

Run npm i -D webpack-upload-plugin and ensure require path is correct.

Warnings

breaking For webpack@4, set optimization.minimize to false! This plugin does not work with UglifyJs plugin. ↓

fix Set `optimization.minimize: false` in webpack config, or use `beforeUpload` callback to compress files before upload.

deprecated For webpack@2, use webpack-upload-plugin <= 0.20.0. This version is incompatible. ↓

fix Downgrade to version 0.20.0 or upgrade webpack to 3+.

gotcha publicPath should be set to '' (empty string) for correct CDN URL replacement. Other values may cause broken paths. ↓

fix Set `output.publicPath` to empty string in webpack config.

gotcha Plugin must be placed after any copy-related plugins (e.g., CopyWebpackPlugin) in the plugins array. ↓

fix Ensure UploadPlugin is the last plugin in the plugins list.

Install

npm install webpack-upload-plugin

yarn add webpack-upload-plugin

pnpm add webpack-upload-plugin

Imports

UploadPlugin
wrong
```
import UploadPlugin from 'webpack-upload-plugin'
```
correct
```
const UploadPlugin = require('webpack-upload-plugin')
```
Package does not ship ESM; only CommonJS require is supported. No default import available.
UploadPlugin
wrong
```
const { UploadPlugin } = require('webpack-upload-plugin')
```
correct
```
const UploadPlugin = require('webpack-upload-plugin')
```
The export is a single constructor function, not a named export. Destructuring will yield undefined.
UploadPlugin
wrong
```
new UploadPlugin(cdn, {})
```
correct
```
new UploadPlugin(cdn)
```
The second argument (options) is optional. If not provided, defaults are used.

Quickstart

Shows a minimal webpack config using the plugin with a simulated CDN uploader.

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const UploadPlugin = require('webpack-upload-plugin');

// You must provide your own CDN upload function
const cdn = {
  upload: (localPaths) => {
    // Simulated upload: map local paths to CDN URLs
    return Promise.all(localPaths.map((localPath) => {
      const cdnUrl = 'https://cdn.example.com/' + path.basename(localPath);
      return { [localPath]: cdnUrl };
    })).then((pairs) => pairs.reduce((acc, pair) => Object.assign(acc, pair), {}));
  }
};

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: ''
  },
  module: {
    rules: [
      { test: /\.js$/, loader: 'babel-loader' },
      { test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'] },
      { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000 } }
    ]
  },
  optimization: { minimize: false },
  plugins: [
    new MiniCssExtractPlugin({ filename: '[name].css' }),
    new HtmlWebpackPlugin({ template: 'index.html', inject: true }),
    new UploadPlugin(cdn)
  ]
};