uglifyjs-3-webpack-plugin

1.2.4 verified Sat Apr 25 auth: no javascript deprecated

Webpack plugin that uses UglifyJS v3 to minify JavaScript. Version 1.2.4 was last released in 2018 and is compatible with webpack 2, 3, and 4. It wraps UglifyJS 3 (ES6+ support) and offers caching, parallelization, source maps, and comment extraction. Unlike the official uglifyjs-webpack-plugin (which may use v2 or v3 depending on version), this plugin specifically targets UglifyJS v3 and is a lightweight alternative.

Common errors

error Error: Cannot find module 'uglifyjs-3-webpack-plugin' ↓

cause Package not installed or missing from node_modules.

fix

Run 'npm install uglifyjs-3-webpack-plugin --save-dev' to install.

error TypeError: UglifyJsPlugin is not a constructor ↓

cause Importing the package incorrectly by destructuring the default export.

fix

Use 'const UglifyJsPlugin = require("uglifyjs-3-webpack-plugin");' without curly braces.

error Error: webpack.optimize.UglifyJsPlugin is not a constructor ↓

cause Confusion with webpack built-in plugin (webpack 3 and below) vs this plugin.

fix

This plugin is used as 'new UglifyJsPlugin(...)' from package, not from webpack.optimize.

error ValidationError: Invalid options object. UglifyJs Plugin has been initialized using an options object that does not match the API schema. ↓

cause Passing unsupported options, e.g., 'compress: {}' without proper format.

fix

Review uglifyOptions structure; for compress use object like { compress: { drop_console: true } }.

Warnings

deprecated This package is deprecated; use terser-webpack-plugin instead for webpack 4+. ↓

fix Replace with terser-webpack-plugin: npm i -D terser-webpack-plugin and import TerserPlugin from 'terser-webpack-plugin'.

breaking Not compatible with webpack 5; only supports webpack 2, 3, and 4. ↓

fix Use terser-webpack-plugin for webpack 5 projects.

gotcha cheap-source-map devtool options do not work with this plugin; use other source map strategies. ↓

fix Avoid 'cheap-source-map', 'cheap-module-source-map', etc. Use 'source-map' or 'eval-source-map' instead.

gotcha Default export; destructuring require will result in undefined. ↓

fix Use const UglifyJsPlugin = require('uglifyjs-3-webpack-plugin'); not const { UglifyJsPlugin } = require(...).

broken UglifyJS v3 may fail on ES6+ syntax if not transpiled by Babel prior to minification. ↓

fix Ensure Babel (or similar) transpiles ES6+ to ES5 before this plugin runs; set webpack module rules accordingly.

Install

npm install uglifyjs-3-webpack-plugin

yarn add uglifyjs-3-webpack-plugin

pnpm add uglifyjs-3-webpack-plugin

Imports

default

wrong

import UglifyJsPlugin from 'uglifyjs-3-webpack-plugin';

correct

const UglifyJsPlugin = require('uglifyjs-3-webpack-plugin');

This package does not export ESM; use CommonJS require.

UglifyJsPlugin

wrong

const { UglifyJsPlugin } = require('uglifyjs-3-webpack-plugin');

correct

const UglifyJsPlugin = require('uglifyjs-3-webpack-plugin');

Default export, not named export. Destructuring will result in undefined.

webpack.config.js usage
wrong
```
optimization: { minimizer: [new UglifyJsPlugin()] }
```
correct
```
plugins: [new UglifyJsPlugin({ sourceMap: true })]
```
For webpack 4, you should use the optimization.minimizer config, not plugins. However, this plugin's docs show plugins array; for webpack 4, prefer the minizer approach with optimization.minimize: true.

Quickstart

Configures the UglifyJS webpack plugin to minify output, drop console.log statements, remove comments, enable source maps, and run in parallel.

const UglifyJsPlugin = require('uglifyjs-3-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: { filename: 'bundle.js' },
  plugins: [
    new UglifyJsPlugin({
      uglifyOptions: {
        compress: { drop_console: true },
        output: { comments: false }
      },
      sourceMap: true,
      parallel: true
    })
  ]
};