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

plugin-methods.mddocs/

Plugin Methods

Static utility methods and instance methods available on the UglifyJsPlugin class.

Capabilities

Instance Methods

Methods available on UglifyJsPlugin instances.

/**
 * Webpack plugin interface method that hooks into webpack compilation process
 * This method is called automatically by webpack and should not be called directly
 * @param {object} compiler - Webpack compiler instance
 * @returns {void}
 */
apply(compiler: object): void;

Usage Note: This method is automatically called by webpack when the plugin is added to the optimization.minimizer array. Do not call this method directly.

Static Utility Methods

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

Source Map Validation

/**
 * Validates if input object is a valid source map
 * Checks for required properties: version, sources, mappings
 * @param {any} input - Input object to validate
 * @returns {boolean} True if input is a valid source map structure
 */
static isSourceMap(input: any): boolean;

Usage Example:

const sourceMapData = {
  version: 3,
  sources: ['input.js'],
  mappings: 'AAAA'
};

if (UglifyJsPlugin.isSourceMap(sourceMapData)) {
  console.log('Valid source map');
}

Required source map properties:

  • version: Source map version number
  • sources: Array of source file paths
  • mappings: Base64 VLQ mapping string

Source Map Processing

/**
 * Creates a SourceMapConsumer from input source map object
 * Returns null if input is invalid or cannot be processed
 * @param {object} inputSourceMap - Source map object to process
 * @returns {SourceMapConsumer | null} SourceMapConsumer instance or null
 */
static buildSourceMap(inputSourceMap: object): SourceMapConsumer | null;

Usage Example:

const sourceMap = UglifyJsPlugin.buildSourceMap(inputSourceMap);
if (sourceMap) {
  // Use SourceMapConsumer for location mapping
  const originalPosition = sourceMap.originalPositionFor({
    line: 10,
    column: 5
  });
}

Error Formatting

/**
 * Formats UglifyJS errors with enhanced location information using source maps
 * Creates detailed error messages with original source locations when available
 * @param {Error} err - UglifyJS error object containing line/col or stack info
 * @param {string} file - File path where the error occurred
 * @param {SourceMapConsumer} sourceMap - Source map for mapping to original locations
 * @param {RequestShortener} requestShortener - Webpack path shortener for clean paths
 * @returns {Error} Enhanced error with location details and context
 */
static buildError(
  err: Error,
  file: string,
  sourceMap: SourceMapConsumer,
  requestShortener: RequestShortener
): Error;

Error Object Properties:

  • line: Line number where error occurred
  • col: Column number where error occurred
  • message: Error description
  • stack: Error stack trace (fallback if line/col unavailable)

Enhanced Error Message Formats:

  • With source map: ${file} from UglifyJs\n${message} [${originalSource}:${originalLine},${originalColumn}][${file}:${line},${col}]
  • Without source map: ${file} from UglifyJs\n${message} [${file}:${line},${col}]
  • Stack trace fallback: ${file} from UglifyJs\n${stack}

Warning Formatting

/**
 * Formats UglifyJS warnings with enhanced location information using source maps
 * Applies warning filters and creates user-friendly warning messages
 * @param {string} warning - UglifyJS warning message
 * @param {string} file - File path where the warning occurred
 * @param {SourceMapConsumer} sourceMap - Source map for mapping to original locations
 * @param {RequestShortener} requestShortener - Webpack path shortener for clean paths
 * @param {Function} warningsFilter - Function to determine if warning should be shown
 * @returns {string | null} Formatted warning message or null if filtered out
 */
static buildWarning(
  warning: string,
  file: string,
  sourceMap: SourceMapConsumer,
  requestShortener: RequestShortener,
  warningsFilter: Function
): string | null;

Warning Processing:

  1. Location Extraction: Parses warning message for location info using regex /\[.+:([0-9]+),([0-9]+)\]/
  2. Source Map Mapping: Maps locations to original source positions when available
  3. Filter Application: Applies warningsFilter function to determine visibility
  4. Message Formatting: Creates clean warning messages with location context

Enhanced Warning Message Format: UglifyJs Plugin: ${warningMessage}${locationMessage}

Where locationMessage includes original source location when available: [${originalSource}:${originalLine},${originalColumn}]

Usage Example:

const warning = UglifyJsPlugin.buildWarning(
  'Dropping unreachable code [input.js:15,10]',
  'bundle.js',
  sourceMap,
  requestShortener,
  (warning, source) => !warning.includes('unreachable')
);

// Returns null if filtered, or formatted warning string

Integration with Webpack

The plugin integrates with webpack through several hooks:

Compilation Hooks

  • compilation.hooks.buildModule: Enables source map usage for detailed error locations
  • compilation.hooks.optimizeChunkAssets: Main minification processing hook
  • mainTemplate.hooks.hashForChunk: Updates content hash for minified assets
  • chunkTemplate.hooks.hashForChunk: Updates chunk hash for cache invalidation

Asset Processing Flow

  1. Chunk Filtering: Applies chunkFilter to determine which chunks to process
  2. File Matching: Uses test, include, exclude patterns to select files
  3. Source Map Processing: Extracts and validates source maps when sourceMap option enabled
  4. Task Creation: Builds processing tasks with caching keys and minification options
  5. Parallel Execution: Distributes tasks across worker processes when parallel enabled
  6. Result Processing: Applies results back to webpack assets with error/warning handling
  7. Comment Extraction: Processes extracted comments into separate license files

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