CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-uglifyjs-webpack-plugin

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

Pending
Overview
Eval results
Files

configuration.mddocs/

Configuration

Comprehensive configuration options for the UglifyJsPlugin constructor, organized by functionality.

Capabilities

File Selection Options

Configure which files the plugin processes during webpack builds.

/**
 * Test to match files against for processing
 * @type {RegExp | string | Array<RegExp | string>}
 * @default /\.js(\?.*)?$/i
 */
test?: RegExp | string | Array<RegExp | string>;

/**
 * Files to include for processing
 * @type {RegExp | string | Array<RegExp | string>}
 * @default undefined
 */
include?: RegExp | string | Array<RegExp | string>;

/**
 * Files to exclude from processing
 * @type {RegExp | string | Array<RegExp | string>}
 * @default undefined
 */
exclude?: RegExp | string | Array<RegExp | string>;

Usage Examples:

new UglifyJsPlugin({
  // Process only .js files (default behavior)
  test: /\.js(\?.*)?$/i,
  
  // Include specific directories
  include: /\/src\//,
  
  // Exclude vendor files
  exclude: [/node_modules/, /vendor/],
  
  // Multiple patterns
  test: [/\.js$/, /\.jsx$/],
})

Chunk Filtering

Control which webpack chunks undergo minification.

/**
 * Function to filter which chunks should be uglified
 * @param {object} chunk - Webpack chunk object
 * @returns {boolean} True to uglify the chunk, false otherwise
 * @default () => true
 */
chunkFilter?: (chunk: any) => boolean;

Usage Example:

new UglifyJsPlugin({
  chunkFilter: (chunk) => {
    // Exclude uglification for the 'vendor' chunk
    if (chunk.name === 'vendor') {
      return false;
    }
    return true;
  },
})

Performance Options

Caching and parallel processing configuration for build performance optimization.

/**
 * Enable file caching for faster rebuilds
 * @type {boolean | string}
 * @default false
 */
cache?: boolean | string;

/**
 * Override default cache keys for cache invalidation control
 * @param {object} defaultCacheKeys - Default cache key object
 * @param {string} file - File path being processed
 * @returns {object} Custom cache keys object
 * @default (defaultCacheKeys) => defaultCacheKeys
 */
cacheKeys?: (defaultCacheKeys: object, file: string) => object;

/**
 * Use multi-process parallel running to improve build speed
 * @type {boolean | number}
 * @default false
 */
parallel?: boolean | number;

Usage Examples:

new UglifyJsPlugin({
  // Enable caching with default directory
  cache: true,
  
  // Custom cache directory
  cache: 'path/to/cache',
  
  // Enable parallel processing (uses os.cpus().length - 1)
  parallel: true,
  
  // Custom number of parallel workers
  parallel: 4,
  
  // Custom cache keys
  cacheKeys: (defaultCacheKeys, file) => ({
    ...defaultCacheKeys,
    customKey: 'custom-value',
  }),
})

Default cache keys include:

  • 'uglify-js': UglifyJS version
  • 'uglifyjs-webpack-plugin': Plugin version
  • 'uglifyjs-webpack-plugin-options': Plugin options
  • hash: Source file hash

Source Map Options

Source map generation and processing configuration.

/**
 * Use source maps to map error message locations to modules
 * Note: Slows down compilation significantly
 * @type {boolean}
 * @default false
 */
sourceMap?: boolean;

Usage Example:

new UglifyJsPlugin({
  sourceMap: true, // Enable for development builds with debugging needs
})

Important: cheap-source-map options don't work with this plugin.

Custom Minification

Override the default UglifyJS minification with custom functions.

/**
 * Custom minify function to replace default UglifyJS behavior
 * @param {object} file - File content object with filename as key
 * @param {object} sourceMap - Source map object (if available)
 * @returns {MinifyResult} Minification result object
 * @default undefined (uses UglifyJS)
 */
minify?: (file: object, sourceMap?: object) => MinifyResult;

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

Usage Example with Terser:

new UglifyJsPlugin({
  minify(file, sourceMap) {
    const uglifyJsOptions = {
      /* your custom options */
    };
    
    if (sourceMap) {
      uglifyJsOptions.sourceMap = {
        content: sourceMap,
      };
    }
    
    return require('terser').minify(file, uglifyJsOptions);
  },
})

Important: Always use require inside minify function when parallel option is enabled.

UglifyJS Options

Configuration options passed directly to UglifyJS minifier.

/**
 * UglifyJS minify options
 * @type {UglifyJSOptions}
 * @default UglifyJS defaults with custom output.comments setting
 */
uglifyOptions?: UglifyJSOptions;

interface UglifyJSOptions {
  /** Enable/disable warnings output */
  warnings?: boolean;
  /** Parser options */
  parse?: object;
  /** Compression options */
  compress?: boolean | object;
  /** Name mangling options */
  mangle?: boolean | object;
  /** Output generation options */
  output?: object;
  /** Enable top-level variable/function name mangling */
  toplevel?: boolean;
  /** Name cache for consistent mangling across builds */
  nameCache?: object;
  /** Enable IE8 compatibility */
  ie8?: boolean;
  /** Keep function names during mangling */
  keep_fnames?: boolean;
}

Usage Example:

new UglifyJsPlugin({
  uglifyOptions: {
    warnings: false,
    parse: {
      // Parse options
    },
    compress: {
      drop_console: true,
      drop_debugger: true,
    },
    mangle: {
      keep_fnames: true,
    },
    output: {
      comments: false,
      beautify: false,
    },
  },
})

Comment Extraction

Configuration for extracting license comments to separate files.

/**
 * Extract comments configuration
 * @type {boolean | string | RegExp | Function | ExtractCommentsOptions}
 * @default false
 */
extractComments?: boolean | string | RegExp | Function | ExtractCommentsOptions;

interface ExtractCommentsOptions {
  /** What comments to extract */
  condition?: boolean | string | RegExp | Function;
  /** Extracted comments filename pattern */
  filename?: string | Function;
  /** Banner text pointing to extracted file */
  banner?: boolean | string | Function;
}

Usage Examples:

new UglifyJsPlugin({
  // Extract all legal comments
  extractComments: true,
  
  // Extract comments matching 'all' or 'some'
  extractComments: 'all',
  extractComments: 'some', // Uses default regex /^\**!|@preserve|@license|@cc_on/i
  
  // Custom regex extraction
  extractComments: /^\**!|@preserve|@license/i,
  
  // Custom function extraction
  extractComments: (astNode, comment) => {
    return comment.value.includes('@license');
  },
  
  // Advanced configuration
  extractComments: {
    condition: /^\**!|@preserve|@license/i,
    filename: (file) => `${file}.LICENSE.txt`,
    banner: (licenseFile) => {
      return `License information can be found in ${licenseFile}`;
    },
  },
})

Default extracted filename: ${file}.LICENSE Default banner: /*! For license information please see ${commentsFile} */

Warning Filtering

Control which UglifyJS warnings are displayed.

/**
 * Filter UglifyJS warnings
 * @param {string} warning - Warning message from UglifyJS
 * @param {string} source - Source file path (if available)
 * @returns {boolean} True to keep the warning, false to filter it out
 * @default () => true
 */
warningsFilter?: (warning: string, source?: string) => boolean;

Usage Example:

new UglifyJsPlugin({
  warningsFilter: (warning, source) => {
    // Filter out specific warnings
    if (warning.includes('Dropping unreachable code')) {
      return false;
    }
    // Keep all other warnings
    return true;
  },
})

Install with Tessl CLI

npx tessl i tessl/npm-uglifyjs-webpack-plugin

docs

advanced-features.md

configuration.md

index.md

plugin-methods.md

tile.json