0
# User Configuration
1

2
Comprehensive set of 33 configuration options for customizing webpack builds, covering output settings, module resolution, development tools, CSS/JavaScript processing, and platform-specific features.
3

4
## Capabilities
5

6
### Build Output Options
7

8
Configuration options that control how and where build outputs are generated.
9

10
```javascript { .api }
11
interface BuildOutputConfig {
12
  /**
13
   * Output directory for build files
14
   * @default "build"
15
   */
16
  outputDir?: string;
17
  
18
  /**
19
   * Public path for assets in production
20
   * @default "/"
21
   */
22
  publicPath?: string;
23
  
24
  /**
25
   * Public path for assets in development
26
   * @default "/"
27
   */
28
  devPublicPath?: string;
29
  
30
  /**
31
   * Output filename pattern for JavaScript files
32
   * @default "[name].js"
33
   */
34
  filename?: string;
35
  
36
  /**
37
   * Enable hash in filenames for cache-busting
38
   * @default false
39
   */
40
  hash?: string | boolean;
41
  
42
  /**
43
   * Asset path configuration for different file types
44
   * @default { js: "js", css: "css" }
45
   */
46
  outputAssetsPath?: {
47
    js?: string;
48
    css?: string;
49
  };
50
}
51
```
52

53
**Usage Example:**
54

55
```javascript
56
// In build configuration file (e.g., build.json or ice.config.js)
57
module.exports = {
58
  outputDir: 'dist',
59
  publicPath: '/static/',
60
  filename: '[name].[contenthash].js',
61
  hash: true,
62
  outputAssetsPath: {
63
    js: 'scripts',
64
    css: 'styles'
65
  }
66
};
67
```
68

69
### Module Resolution Options
70

71
Options for configuring how modules are resolved and imported.
72

73
```javascript { .api }
74
interface ModuleResolutionConfig {
75
  /**
76
   * Path aliases for module resolution
77
   * @default {}
78
   */
79
  alias?: Record<string, string>;
80
  
81
  /**
82
   * File extensions to resolve automatically
83
   * @default ['.js', '.jsx', '.json', '.html', '.ts', '.tsx', '.rml']
84
   */
85
  extensions?: string[];
86
  
87
  /**
88
   * Directories to search for modules
89
   * @default ['node_modules']
90
   */
91
  modules?: string[];
92
  
93
  /**
94
   * External dependencies that shouldn't be bundled
95
   * @default {}
96
   */
97
  externals?: Record<string, any>;
98
}
99
```
100

101
**Usage Example:**
102

103
```javascript
104
module.exports = {
105
  alias: {
106
    '@': './src',
107
    '@components': './src/components',
108
    '@utils': './src/utils'
109
  },
110
  extensions: ['.ts', '.tsx', '.js', '.jsx', '.vue'],
111
  modules: ['node_modules', 'src'],
112
  externals: {
113
    'react': 'React',
114
    'react-dom': 'ReactDOM'
115
  }
116
};
117
```
118

119
### Development Options
120

121
Configuration for development server and debugging tools.
122

123
```javascript { .api }
124
interface DevelopmentConfig {
125
  /**
126
   * Development server configuration
127
   * @default Complex object with hot reload, CORS, etc.
128
   */
129
  devServer?: {
130
    disableHostCheck?: boolean;
131
    compress?: boolean;
132
    transportMode?: string;
133
    logLevel?: string;
134
    clientLogLevel?: string;
135
    hot?: boolean;
136
    publicPath?: string;
137
    quiet?: boolean;
138
    watchOptions?: {
139
      ignored?: RegExp;
140
      aggregateTimeout?: number;
141
    };
142
    before?: (app: any) => void;
143
  };
144
  
145
  /**
146
   * Enable mock server for API mocking
147
   * @default true
148
   */
149
  mock?: boolean;
150
  
151
  /**
152
   * Proxy configuration for development server
153
   * @default {}
154
   */
155
  proxy?: Record<string, any>;
156
}
157
```
158

159
**Usage Example:**
160

161
```javascript
162
module.exports = {
163
  devServer: {
164
    hot: true,
165
    compress: true,
166
    port: 3000,
167
    host: 'localhost'
168
  },
169
  mock: true,
170
  proxy: {
171
    '/api': {
172
      target: 'http://localhost:8080',
173
      changeOrigin: true,
174
      pathRewrite: {
175
        '^/api': ''
176
      }
177
    }
178
  }
179
};
180
```
181

182
### Build Optimization Options
183

184
Options for controlling build optimization and minification.
185

186
```javascript { .api }
187
interface OptimizationConfig {
188
  /**
189
   * Enable minification for production builds
190
   */
191
  minify?: boolean;
192
  
193
  /**
194
   * Enable source map generation
195
   */
196
  sourceMap?: boolean;
197
  
198
  /**
199
   * Browser support targets for Babel and CSS processing
200
   * @default "last 2 versions, Firefox ESR, > 1%, ie >= 9, iOS >= 8, Android >= 4"
201
   */
202
  browserslist?: string | object;
203
  
204
  /**
205
   * Enable vendor chunk splitting
206
   * @default true
207
   */
208
  vendor?: boolean;
209
  
210
  /**
211
   * Terser minification options
212
   * @default {}
213
   */
214
  terserOptions?: Record<string, any>;
215
}
216
```
217

218
### CSS Processing Options
219

220
Configuration for CSS, Less, and Sass processing.
221

222
```javascript { .api }
223
interface CSSProcessingConfig {
224
  /**
225
   * CSS loader configuration options
226
   * @default {}
227
   */
228
  cssLoaderOptions?: Record<string, any>;
229
  
230
  /**
231
   * Less loader configuration options
232
   * @default {}
233
   */
234
  lessLoaderOptions?: Record<string, any>;
235
  
236
  /**
237
   * Sass loader configuration options
238
   * @default {}
239
   */
240
  sassLoaderOptions?: Record<string, any>;
241
  
242
  /**
243
   * Use postcss config file (.postcssrc)
244
   * @default false
245
   */
246
  postcssrc?: boolean;
247
  
248
  /**
249
   * PostCSS options object
250
   */
251
  postcssOptions?: Record<string, any>;
252
}
253
```
254

255
**Usage Example:**
256

257
```javascript
258
module.exports = {
259
  cssLoaderOptions: {
260
    modules: true,
261
    localIdentName: '[name]__[local]___[hash:base64:5]'
262
  },
263
  lessLoaderOptions: {
264
    lessOptions: {
265
      modifyVars: {
266
        '@primary-color': '#1890ff'
267
      }
268
    }
269
  },
270
  sassLoaderOptions: {
271
    additionalData: '@import "~@/styles/variables.scss";'
272
  },
273
  postcssrc: true
274
};
275
```
276

277
### JavaScript Processing Options
278

279
Configuration for Babel compilation and JavaScript processing.
280

281
```javascript { .api }
282
interface JavaScriptProcessingConfig {
283
  /**
284
   * Additional Babel plugins to apply
285
   * @default []
286
   */
287
  babelPlugins?: any[];
288
  
289
  /**
290
   * Additional Babel presets to apply
291
   * @default []
292
   */
293
  babelPresets?: any[];
294
  
295
  /**
296
   * Dependencies that should be compiled by Babel
297
   * @default []
298
   */
299
  compileDependencies?: string[];
300
  
301
  /**
302
   * Enable modular import runtime optimization
303
   */
304
  modularImportRuntime?: boolean;
305
  
306
  /**
307
   * Polyfill configuration
308
   * @default "entry"
309
   */
310
  polyfill?: string | boolean | object;
311
}
312
```
313

314
**Usage Example:**
315

316
```javascript
317
module.exports = {
318
  babelPlugins: [
319
    ['import', { libraryName: 'antd', style: true }, 'antd']
320
  ],
321
  babelPresets: [
322
    ['@babel/preset-env', { useBuiltIns: 'usage', corejs: 3 }]
323
  ],
324
  compileDependencies: ['@my-org/shared-components'],
325
  polyfill: 'usage'
326
};
327
```
328

329
### Development Tools Options
330

331
Configuration for development tools and code quality.
332

333
```javascript { .api }
334
interface DevelopmentToolsConfig {
335
  /**
336
   * ESLint configuration
337
   * Can be boolean to enable/disable or object for custom config
338
   */
339
  eslint?: boolean | Record<string, any>;
340
  
341
  /**
342
   * Enable TypeScript type checking
343
   * @default false
344
   */
345
  tsChecker?: boolean;
346
  
347
  /**
348
   * Global variable definitions for DefinePlugin
349
   * @default {}
350
   */
351
  define?: Record<string, any>;
352
}
353
```
354

355
**Usage Example:**
356

357
```javascript
358
module.exports = {
359
  eslint: {
360
    extends: ['@my-org/eslint-config'],
361
    rules: {
362
      'no-console': 'warn'
363
    }
364
  },
365
  tsChecker: true,
366
  define: {
367
    API_BASE_URL: JSON.stringify(process.env.API_BASE_URL),
368
    FEATURE_FLAGS: {
369
      newDashboard: true,
370
      betaFeature: false
371
    }
372
  }
373
};
374
```
375

376
### Library Build Options
377

378
Configuration for building libraries and packages.
379

380
```javascript { .api }
381
interface LibraryBuildConfig {
382
  /**
383
   * Library target type for UMD builds
384
   * @default ""
385
   */
386
  libraryTarget?: string;
387
  
388
  /**
389
   * Library name for UMD builds
390
   * @default ""
391
   */
392
  library?: string | object;
393
  
394
  /**
395
   * Library export mode
396
   * @default ""
397
   */
398
  libraryExport?: string | string[];
399
}
400
```
401

402
**Usage Example:**
403

404
```javascript
405
module.exports = {
406
  libraryTarget: 'umd',
407
  library: 'MyLibrary',
408
  libraryExport: 'default'
409
};
410
```
411

412
### Advanced Build Options
413

414
Advanced configuration options for specialized build scenarios.
415

416
```javascript { .api }
417
interface AdvancedBuildConfig {
418
  /**
419
   * Enable DLL (Dynamic Link Library) bundling
420
   * @default false
421
   */
422
  dll?: boolean;
423
  
424
  /**
425
   * DLL entry configuration
426
   * @default {}
427
   */
428
  dllEntry?: Record<string, string[]>;
429
  
430
  /**
431
   * Build targets for multi-platform builds
432
   */
433
  targets?: string[];
434
  
435
  /**
436
   * Custom webpack loaders configuration
437
   */
438
  webpackLoaders?: Record<string, any>;
439
  
440
  /**
441
   * Custom webpack plugins configuration
442
   */
443
  webpackPlugins?: Record<string, any>;
444
  
445
  /**
446
   * Mode-specific configuration overrides
447
   * @default {}
448
   */
449
  modeConfig?: Record<string, any>;
450
  
451
  /**
452
   * Disable runtime framework initialization
453
   * @default false
454
   */
455
  disableRuntime?: boolean;
456
}
457
```
458

459
**Usage Example:**
460

461
```javascript
462
module.exports = {
463
  dll: true,
464
  dllEntry: {
465
    vendor: ['react', 'react-dom', 'lodash']
466
  },
467
  targets: ['web', 'weex'],
468
  webpackPlugins: {
469
    'my-custom-plugin': {
470
      enable: true,
471
      options: {
472
        customOption: 'value'
473
      }
474
    }
475
  },
476
  modeConfig: {
477
    development: {
478
      publicPath: '/dev/',
479
      sourceMap: true
480
    },
481
    production: {
482
      publicPath: '/prod/',
483
      sourceMap: false
484
    }
485
  },
486
  disableRuntime: false
487
};
488
```