Zip Webpack Plugin

4.0.3 verified Mon Apr 27 auth: no javascript

Webpack plugin that compresses all emitted assets into a single zip file. Current stable version is 4.0.3, supporting Webpack 4 and 5 (and Rspack experimentally). It uses yazl for zip creation and offers options for path prefix, filename, extension, include/exclude filters, and compression control. Compared to alternatives like `webpack-plugin-zip`, it is lightweight, well-maintained, and straightforward. Release cadence is sporadic; major versions introduce breaking changes for Webpack major upgrades.

Common errors

error Error: Cannot find module 'zip-webpack-plugin' ↓

cause Package not installed or missing in node_modules.

fix

Run npm install --save-dev zip-webpack-plugin in the project root.

error TypeError: ZipPlugin is not a constructor ↓

cause ZipPlugin imported incorrectly or not instantiated with 'new'.

fix

Use const ZipPlugin = require('zip-webpack-plugin'); then new ZipPlugin({...}) in plugins array.

error ValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. - configuration.plugins[0] should be a function. ↓

cause Forgot to instantiate ZipPlugin with 'new'.

fix

Change plugins: [ZipPlugin({...})] to plugins: [new ZipPlugin({...})].

Warnings

breaking v4.0.0 drops support for Node < 10. ↓

fix Upgrade to Node >= 10 or stay on v3.x (which supports Node 8+).

breaking v3.0.0 drops Webpack 3 support; requires Webpack 4+. ↓

fix For Webpack 3, use v2.0.0: npm install zip-webpack-plugin@2.0.0

gotcha When using Webpack 5, the plugin runs at a later stage to pick up changes from other plugins (v4.0.1+). In earlier v4.x, some plugin modifications might be missed. ↓

fix Upgrade to v4.0.1 or later.

deprecated The 'path' option can be relative to the Webpack output path. In v4, absolute paths are also allowed, but relative paths are the most common pattern. ↓

fix No fix needed; just ensure the path is correct.

gotcha The plugin does not work with Webpack 5's persistent caching by default; assets may not be zipped on cache hits. ↓

fix Explicitly disable persistent caching or ensure the plugin re-runs (e.g., using cache.version).

Install

npm install zip-webpack-plugin

yarn add zip-webpack-plugin

pnpm add zip-webpack-plugin

Imports

ZipPlugin

wrong

import ZipPlugin from 'zip-webpack-plugin';

correct

const ZipPlugin = require('zip-webpack-plugin');

Package is CommonJS-only; ESM import may fail in strict ESM environments.

new ZipPlugin({...})
wrong
```
plugins: [ZipPlugin({ filename: 'out.zip' })]
```
correct
```
plugins: [new ZipPlugin({ filename: 'out.zip' })]
```
ZipPlugin must be instantiated with 'new'. Forgetting 'new' will not throw but will cause undefined behavior.
path
wrong
```
path is not imported
```
correct
```
const path = require('path');
```
Required if using path.join in pathMapper or other path operations in configuration.

Quickstart

Shows typical Webpack 5 configuration with ZipPlugin: entry, output, and plugin options for filtering assets, setting path prefix, and compression.

const path = require('path');
const ZipPlugin = require('zip-webpack-plugin');

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  plugins: [
    new ZipPlugin({
      filename: 'app.zip',
      pathPrefix: 'static/',
      include: [/\\.js$/, /\\.css$/],
      exclude: [/\\.map$/],
      fileOptions: {
        compress: true,
        mtime: new Date()
      },
      zipOptions: {
        forceZip64Format: false
      }
    })
  ]
};