0
# Plugin System
1

2
The webpack CLI plugin system provides integration between CLI functionality and webpack's plugin architecture, offering progress reporting, bundle analysis, and CLI-specific webpack enhancements.
3

4
## Capabilities
5

6
### CLIPlugin Class
7

8
Main plugin class that integrates CLI functionality with webpack compilation.
9

10
```typescript { .api }
11
/**
12
 * CLI Plugin for webpack integration
13
 * Provides progress reporting, bundle analysis, and helpful output
14
 */
15
class CLIPlugin {
16
  /**
17
   * Create CLIPlugin instance
18
   * @param options - Plugin configuration options
19
   */
20
  constructor(options: CLIPluginOptions);
21

22
  /**
23
   * Apply plugin to webpack compiler
24
   * @param compiler - Webpack compiler instance
25
   */
26
  apply(compiler: Compiler): void;
27
}
28
```
29

30
**Usage Examples:**
31

32
```typescript
33
import { CLIPlugin } from "webpack-cli";
34

35
// Basic usage
36
const plugin = new CLIPlugin({
37
  helpfulOutput: true,
38
  progress: true
39
});
40

41
// Add to webpack config
42
const config = {
43
  plugins: [plugin]
44
};
45

46
// Advanced configuration
47
const advancedPlugin = new CLIPlugin({
48
  helpfulOutput: true,
49
  progress: "profile",
50
  analyze: true,
51
  hot: true,
52
  isMultiCompiler: false,
53
  configPath: ["webpack.config.js"]
54
});
55
```
56

57
### Progress Reporting
58

59
Built-in progress reporting for webpack compilation.
60

61
```typescript { .api }
62
/**
63
 * Setup progress plugin for compilation tracking
64
 * @param compiler - Webpack compiler instance
65
 */
66
setupProgressPlugin(compiler: Compiler): void;
67
```
68

69
The progress plugin provides:
70
- Compilation progress percentage
71
- Current compilation phase
72
- Module processing status
73
- Build timing information
74

75
**Configuration:**
76

77
```typescript
78
// Enable basic progress
79
new CLIPlugin({ progress: true });
80

81
// Enable detailed profiling
82
new CLIPlugin({ progress: "profile" });
83
```
84

85
### Bundle Analysis
86

87
Integration with webpack-bundle-analyzer for bundle inspection.
88

89
```typescript { .api }
90
/**
91
 * Setup bundle analyzer plugin
92
 * @param compiler - Webpack compiler instance
93
 * @returns Promise that resolves when analyzer is configured
94
 */
95
setupBundleAnalyzerPlugin(compiler: Compiler): Promise<void>;
96
```
97

98
**Usage:**
99

100
```typescript
101
// Enable bundle analysis
102
new CLIPlugin({ analyze: true });
103
```
104

105
This will:
106
- Launch bundle analyzer after compilation
107
- Generate interactive bundle visualization
108
- Show chunk sizes and dependencies
109
- Help identify optimization opportunities
110

111
### Helpful Output
112

113
Enhanced compilation output and logging.
114

115
```typescript { .api }
116
/**
117
 * Setup helpful compilation output
118
 * @param compiler - Webpack compiler instance
119
 */
120
setupHelpfulOutput(compiler: Compiler): void;
121
```
122

123
Provides:
124
- Formatted compilation statistics
125
- Error and warning highlighting
126
- Asset size information
127
- Compilation time reporting
128
- File change notifications in watch mode
129

130
### Plugin Configuration
131

132
Complete configuration interface for CLIPlugin.
133

134
```typescript { .api }
135
interface CLIPluginOptions {
136
  /**
137
   * Enable helpful compilation output and logging
138
   */
139
  helpfulOutput: boolean;
140

141
  /**
142
   * Enable progress reporting during compilation
143
   * - true: Basic progress bar
144
   * - "profile": Detailed profiling information
145
   * - false/undefined: No progress reporting
146
   */
147
  progress?: boolean | "profile";
148

149
  /**
150
   * Enable bundle analysis after compilation
151
   * Requires webpack-bundle-analyzer package
152
   */
153
  analyze?: boolean;
154

155
  /**
156
   * Hot module replacement configuration
157
   * - true: Enable HMR
158
   * - "only": HMR without page refresh fallback
159
   * - false/undefined: Disable HMR
160
   */
161
  hot?: boolean | "only";
162

163
  /**
164
   * Prefetch configuration for resource hints
165
   */
166
  prefetch?: string;
167

168
  /**
169
   * Indicate if this is a multi-compiler setup
170
   */
171
  isMultiCompiler?: boolean;
172

173
  /**
174
   * Paths to configuration files
175
   */
176
  configPath?: string[];
177
}
178
```
179

180
### Plugin Integration Examples
181

182
Examples of using CLIPlugin in different scenarios.
183

184
**Basic Development Setup:**
185

186
```typescript
187
import { CLIPlugin } from "webpack-cli";
188

189
const config = {
190
  mode: "development",
191
  plugins: [
192
    new CLIPlugin({
193
      helpfulOutput: true,
194
      progress: true,
195
      hot: true
196
    })
197
  ]
198
};
199
```
200

201
**Production Build with Analysis:**
202

203
```typescript
204
const productionConfig = {
205
  mode: "production",
206
  plugins: [
207
    new CLIPlugin({
208
      helpfulOutput: true,
209
      progress: "profile",
210
      analyze: true
211
    })
212
  ]
213
};
214
```
215

216
**Multi-Compiler Configuration:**
217

218
```typescript
219
const multiConfig = [
220
  {
221
    name: "client",
222
    plugins: [
223
      new CLIPlugin({
224
        helpfulOutput: true,
225
        progress: true,
226
        isMultiCompiler: true,
227
        configPath: ["webpack.client.js"]
228
      })
229
    ]
230
  },
231
  {
232
    name: "server", 
233
    plugins: [
234
      new CLIPlugin({
235
        helpfulOutput: true,
236
        progress: true,
237
        isMultiCompiler: true,
238
        configPath: ["webpack.server.js"]
239
      })
240
    ]
241
  }
242
];
243
```
244

245
### Advanced Integration
246

247
Custom plugin integration with webpack CLI.
248

249
```typescript
250
// Creating custom CLI-aware plugins
251
class CustomCLIPlugin {
252
  constructor(private cliPlugin: CLIPlugin) {}
253

254
  apply(compiler: Compiler) {
255
    // Access CLI functionality
256
    this.cliPlugin.apply(compiler);
257
    
258
    // Add custom hooks
259
    compiler.hooks.done.tap("CustomCLIPlugin", (stats) => {
260
      // Custom post-compilation logic
261
    });
262
  }
263
}
264

265
// Usage
266
const cliPlugin = new CLIPlugin({ helpfulOutput: true });
267
const customPlugin = new CustomCLIPlugin(cliPlugin);
268

269
const config = {
270
  plugins: [customPlugin]
271
};
272
```
273

274
### Plugin Dependencies
275

276
Optional peer dependencies that enhance plugin functionality:
277

278
```typescript { .api }
279
// Optional dependencies for enhanced features
280
interface OptionalDependencies {
281
  "webpack-bundle-analyzer"?: "^4.0.0";  // For analyze option
282
  "webpack-dev-server"?: "^4.0.0";       // For serve command integration
283
}
284
```
285

286
When these packages are installed, additional functionality becomes available:
287
- Bundle analysis visualization
288
- Development server integration
289
- Hot module replacement enhancements