or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

advanced-features.mdconfiguration.mdindex.mdplugin-methods.md
tile.json

tessl/npm-uglifyjs-webpack-plugin

UglifyJS plugin for webpack that provides JavaScript minification with extensive configuration options, caching, and parallel processing support.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/uglifyjs-webpack-plugin@2.2.x

To install, run

npx @tessl/cli install tessl/npm-uglifyjs-webpack-plugin@2.2.0

index.mddocs/

UglifyJS Webpack Plugin

UglifyJS Webpack Plugin integrates the UglifyJS JavaScript minifier into webpack's optimization phase. It provides extensive configuration options for JavaScript minification, including source map support, parallel processing, caching, and custom minification functions, making it ideal for production build optimization.

Package Information

  • Package Name: uglifyjs-webpack-plugin
  • Package Type: npm
  • Language: JavaScript
  • Installation: npm install uglifyjs-webpack-plugin --save-dev
  • Webpack Version: ^4.0.0
  • Node.js Version: >= 6.9.0

Core Imports

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

ES6 modules (if using Babel/TypeScript):

import UglifyJsPlugin from 'uglifyjs-webpack-plugin';

Note: The package exports the plugin class as the default export. The CommonJS version uses module.exports = plugin.default to ensure compatibility.

Basic Usage

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

module.exports = {
  optimization: {
    minimizer: [new UglifyJsPlugin()],
  },
};

Performance-optimized configuration:

module.exports = {
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        sourceMap: true, // Enable if you need source maps
      }),
    ],
  },
};

Webpack Integration

The plugin integrates with webpack's optimization phase and requires webpack ^4.0.0. Here are common integration patterns:

Development Mode (webpack.dev.js):

module.exports = {
  mode: 'development',
  optimization: {
    minimize: false, // Usually disabled in development
  },
};

Production Mode (webpack.prod.js):

module.exports = {
  mode: 'production',
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        extractComments: true,
      }),
    ],
  },
};

Multi-configuration setup:

const common = require('./webpack.common.js');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  ...common,
  optimization: {
    ...common.optimization,
    minimizer: [
      new UglifyJsPlugin({
        test: /\.js(\?.*)?$/i,
        parallel: process.env.CI ? 2 : true,
        cache: process.env.CI ? false : true,
      }),
    ],
  },
};

Architecture

The plugin operates through several key components:

  • UglifyJsPlugin Class: Main webpack plugin implementing webpack's optimization hooks
  • TaskRunner: Internal task management system supporting parallel processing and caching
  • Minification Engine: UglifyJS integration with configurable options and custom function support
  • Source Map Integration: Webpack source map processing with error/warning location mapping
  • Comment Extraction: Configurable license comment extraction to separate files

Capabilities

Plugin Constructor

Main plugin class that integrates UglifyJS minification into webpack builds with extensive configuration options.

/**
 * Creates new UglifyJS webpack plugin instance
 * @param {UglifyOptions} options - Plugin configuration options
 */
class UglifyJsPlugin {
  constructor(options = {});
}

interface UglifyOptions {
  test?: RegExp | string | Array<RegExp | string>;
  include?: RegExp | string | Array<RegExp | string>;
  exclude?: RegExp | string | Array<RegExp | string>;
  chunkFilter?: (chunk: any) => boolean;
  cache?: boolean | string;
  cacheKeys?: (defaultCacheKeys: object, file: string) => object;
  parallel?: boolean | number;
  sourceMap?: boolean;
  minify?: (file: object, sourceMap?: object) => MinifyResult;
  uglifyOptions?: UglifyJSOptions;
  extractComments?: boolean | string | RegExp | Function | ExtractCommentsOptions;
  warningsFilter?: (warning: string, source?: string) => boolean;
}

Configuration

Static Utility Methods

Helper methods for source map validation, error formatting, and warning processing.

/**
 * Validates if input is a valid source map object
 * @param {any} input - Input to validate
 * @returns {boolean} True if valid source map
 */
static isSourceMap(input: any): boolean;

/**
 * Creates SourceMapConsumer from input source map
 * @param {object} inputSourceMap - Source map object
 * @returns {SourceMapConsumer | null} Source map consumer or null
 */
static buildSourceMap(inputSourceMap: object): SourceMapConsumer | null;

/**
 * Formats UglifyJS errors with source map location information
 * @param {Error} err - UglifyJS error object
 * @param {string} file - File path where error occurred
 * @param {SourceMapConsumer} sourceMap - Source map for location mapping
 * @param {RequestShortener} requestShortener - Webpack path shortener
 * @returns {Error} Formatted error with location details
 */
static buildError(
  err: Error,
  file: string,
  sourceMap: SourceMapConsumer,
  requestShortener: RequestShortener
): Error;

/**
 * Formats UglifyJS warnings with source map location information
 * @param {string} warning - UglifyJS warning message
 * @param {string} file - File path where warning occurred
 * @param {SourceMapConsumer} sourceMap - Source map for location mapping
 * @param {RequestShortener} requestShortener - Webpack path shortener
 * @param {Function} warningsFilter - Function to filter warnings
 * @returns {string | null} Formatted warning or null if filtered
 */
static buildWarning(
  warning: string,
  file: string,
  sourceMap: SourceMapConsumer,
  requestShortener: RequestShortener,
  warningsFilter: Function
): string | null;

Plugin Methods

Advanced Features

Performance optimization and customization capabilities for large-scale builds.

// Caching configuration
cache: boolean | string;

// Parallel processing configuration  
parallel: boolean | number;

// Custom minification function
minify: (file: object, sourceMap?: object) => MinifyResult;

Advanced Features

Types

interface MinifyResult {
  error?: Error;
  map?: string;
  code?: string;
  warnings?: string[];
  extractedComments?: string[];
}

interface UglifyJSOptions {
  warnings?: boolean;
  parse?: object;
  compress?: boolean | object;
  mangle?: boolean | object;
  output?: object;
  toplevel?: boolean;
  nameCache?: object;
  ie8?: boolean;
  keep_fnames?: boolean;
}

interface ExtractCommentsOptions {
  condition?: boolean | string | RegExp | Function;
  filename?: string | Function;
  banner?: boolean | string | Function;
}

// External library types (for reference)
interface SourceMapConsumer {
  // From 'source-map' package - represents parsed source map
  originalPositionFor(position: { line: number; column: number }): any;
}

interface RequestShortener {
  // From webpack - shortens file paths for cleaner output
  shorten(request: string): string;
}