0
# UglifyJS Webpack Plugin
1

2
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.
3

4
## Package Information
5

6
- **Package Name**: uglifyjs-webpack-plugin
7
- **Package Type**: npm
8
- **Language**: JavaScript
9
- **Installation**: `npm install uglifyjs-webpack-plugin --save-dev`
10
- **Webpack Version**: ^4.0.0
11
- **Node.js Version**: >= 6.9.0
12

13
## Core Imports
14

15
```javascript
16
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
17
```
18

19
ES6 modules (if using Babel/TypeScript):
20
```javascript
21
import UglifyJsPlugin from 'uglifyjs-webpack-plugin';
22
```
23

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

26
## Basic Usage
27

28
```javascript
29
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
30

31
module.exports = {
32
  optimization: {
33
    minimizer: [new UglifyJsPlugin()],
34
  },
35
};
36
```
37

38
Performance-optimized configuration:
39
```javascript
40
module.exports = {
41
  optimization: {
42
    minimizer: [
43
      new UglifyJsPlugin({
44
        cache: true,
45
        parallel: true,
46
        sourceMap: true, // Enable if you need source maps
47
      }),
48
    ],
49
  },
50
};
51
```
52

53
## Webpack Integration
54

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

57
**Development Mode (webpack.dev.js):**
58
```javascript
59
module.exports = {
60
  mode: 'development',
61
  optimization: {
62
    minimize: false, // Usually disabled in development
63
  },
64
};
65
```
66

67
**Production Mode (webpack.prod.js):**
68
```javascript
69
module.exports = {
70
  mode: 'production',
71
  optimization: {
72
    minimizer: [
73
      new UglifyJsPlugin({
74
        cache: true,
75
        parallel: true,
76
        extractComments: true,
77
      }),
78
    ],
79
  },
80
};
81
```
82

83
**Multi-configuration setup:**
84
```javascript
85
const common = require('./webpack.common.js');
86
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
87

88
module.exports = {
89
  ...common,
90
  optimization: {
91
    ...common.optimization,
92
    minimizer: [
93
      new UglifyJsPlugin({
94
        test: /\.js(\?.*)?$/i,
95
        parallel: process.env.CI ? 2 : true,
96
        cache: process.env.CI ? false : true,
97
      }),
98
    ],
99
  },
100
};
101
```
102

103
## Architecture
104

105
The plugin operates through several key components:
106

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

113
## Capabilities
114

115
### Plugin Constructor
116

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

119
```javascript { .api }
120
/**
121
 * Creates new UglifyJS webpack plugin instance
122
 * @param {UglifyOptions} options - Plugin configuration options
123
 */
124
class UglifyJsPlugin {
125
  constructor(options = {});
126
}
127

128
interface UglifyOptions {
129
  test?: RegExp | string | Array<RegExp | string>;
130
  include?: RegExp | string | Array<RegExp | string>;
131
  exclude?: RegExp | string | Array<RegExp | string>;
132
  chunkFilter?: (chunk: any) => boolean;
133
  cache?: boolean | string;
134
  cacheKeys?: (defaultCacheKeys: object, file: string) => object;
135
  parallel?: boolean | number;
136
  sourceMap?: boolean;
137
  minify?: (file: object, sourceMap?: object) => MinifyResult;
138
  uglifyOptions?: UglifyJSOptions;
139
  extractComments?: boolean | string | RegExp | Function | ExtractCommentsOptions;
140
  warningsFilter?: (warning: string, source?: string) => boolean;
141
}
142
```
143

144
[Configuration](./configuration.md)
145

146
### Static Utility Methods
147

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

150
```javascript { .api }
151
/**
152
 * Validates if input is a valid source map object
153
 * @param {any} input - Input to validate
154
 * @returns {boolean} True if valid source map
155
 */
156
static isSourceMap(input: any): boolean;
157

158
/**
159
 * Creates SourceMapConsumer from input source map
160
 * @param {object} inputSourceMap - Source map object
161
 * @returns {SourceMapConsumer | null} Source map consumer or null
162
 */
163
static buildSourceMap(inputSourceMap: object): SourceMapConsumer | null;
164

165
/**
166
 * Formats UglifyJS errors with source map location information
167
 * @param {Error} err - UglifyJS error object
168
 * @param {string} file - File path where error occurred
169
 * @param {SourceMapConsumer} sourceMap - Source map for location mapping
170
 * @param {RequestShortener} requestShortener - Webpack path shortener
171
 * @returns {Error} Formatted error with location details
172
 */
173
static buildError(
174
  err: Error,
175
  file: string,
176
  sourceMap: SourceMapConsumer,
177
  requestShortener: RequestShortener
178
): Error;
179

180
/**
181
 * Formats UglifyJS warnings with source map location information
182
 * @param {string} warning - UglifyJS warning message
183
 * @param {string} file - File path where warning occurred
184
 * @param {SourceMapConsumer} sourceMap - Source map for location mapping
185
 * @param {RequestShortener} requestShortener - Webpack path shortener
186
 * @param {Function} warningsFilter - Function to filter warnings
187
 * @returns {string | null} Formatted warning or null if filtered
188
 */
189
static buildWarning(
190
  warning: string,
191
  file: string,
192
  sourceMap: SourceMapConsumer,
193
  requestShortener: RequestShortener,
194
  warningsFilter: Function
195
): string | null;
196
```
197

198
[Plugin Methods](./plugin-methods.md)
199

200
### Advanced Features
201

202
Performance optimization and customization capabilities for large-scale builds.
203

204
```javascript { .api }
205
// Caching configuration
206
cache: boolean | string;
207

208
// Parallel processing configuration  
209
parallel: boolean | number;
210

211
// Custom minification function
212
minify: (file: object, sourceMap?: object) => MinifyResult;
213
```
214

215
[Advanced Features](./advanced-features.md)
216

217
## Types
218

219
```javascript { .api }
220
interface MinifyResult {
221
  error?: Error;
222
  map?: string;
223
  code?: string;
224
  warnings?: string[];
225
  extractedComments?: string[];
226
}
227

228
interface UglifyJSOptions {
229
  warnings?: boolean;
230
  parse?: object;
231
  compress?: boolean | object;
232
  mangle?: boolean | object;
233
  output?: object;
234
  toplevel?: boolean;
235
  nameCache?: object;
236
  ie8?: boolean;
237
  keep_fnames?: boolean;
238
}
239

240
interface ExtractCommentsOptions {
241
  condition?: boolean | string | RegExp | Function;
242
  filename?: string | Function;
243
  banner?: boolean | string | Function;
244
}
245

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

252
interface RequestShortener {
253
  // From webpack - shortens file paths for cleaner output
254
  shorten(request: string): string;
255
}
256
```