UglifyJS plugin for webpack that provides JavaScript minification with extensive configuration options, caching, and parallel processing support.
—
Comprehensive configuration options for the UglifyJsPlugin constructor, organized by functionality.
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$/],
})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;
},
})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 optionshash: Source file hashSource 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.
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.
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,
},
},
})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} */
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