0
# Configuration
1

2
Type definitions for Umi configuration options, webpack settings, routing, static exports, SSR, and plugin configuration. Provides complete type safety for Umi configuration files.
3

4
## Capabilities
5

6
### Main Configuration Interface
7

8
The primary configuration interface extending AF-Webpack configuration options.
9

10
```typescript { .api }
11
/**
12
 * Main Umi configuration interface extending AF-Webpack configuration
13
 */
14
interface IConfig extends IAFWebpackConfig {
15
  // Basic config
16
  block?: object;
17
  chainWebpack?: IChangeWebpackConfigFunc<IWebpackChainConfig, IAFWebpackConfig>;
18
  context?: object;
19
  disableRedirectHoist?: boolean;
20
  exportStatic?: boolean | IExportStaticOpts;
21
  outputPath?: string;
22
  plugins?: IPlugin[];
23
  routes?: IRoute[] | null;
24
  runtimePublicPath?: boolean | string;
25
  singular?: boolean;
26
  mock?: IMockOpts;
27
  treeShaking?: boolean;
28
  dva?: any;
29
  locale?: any;
30

31
  // Implemented in plugins
32
  base?: string;
33
  history?: 'browser' | 'hash' | 'memory';
34
  mountElementId?: string;
35
  targets?: {
36
    [key: string]: number;
37
  };
38
  ssr?: IExportSSROpts;
39
}
40
```
41

42
**Usage Examples:**
43

44
```typescript
45
import { IConfig } from 'umi-types';
46

47
const config: IConfig = {
48
  // Basic configuration
49
  outputPath: './dist',
50
  history: 'browser',
51
  base: '/app/',
52
  
53
  // Plugin configuration
54
  plugins: [
55
    'umi-plugin-react',
56
    ['umi-plugin-dva', { immer: true }],
57
  ],
58
  
59
  // Routing configuration
60
  routes: [
61
    { path: '/', component: './pages/index' },
62
    { path: '/users', component: './pages/users' },
63
  ],
64
  
65
  // Static export options
66
  exportStatic: {
67
    htmlSuffix: true,
68
    dynamicRoot: true,
69
  },
70
  
71
  // Webpack configuration
72
  alias: {
73
    '@': './src',
74
    'components': './src/components',
75
  },
76
  
77
  // Development server
78
  devServer: {
79
    port: 8000,
80
    host: 'localhost',
81
  },
82
  
83
  // Build options
84
  hash: true,
85
  minimizer: 'terserjs',
86
  
87
  chainWebpack(config, { webpack }) {
88
    config.resolve.alias.set('@utils', './src/utils');
89
    return config;
90
  },
91
};
92

93
export default config;
94
```
95

96
### Plugin Configuration
97

98
Plugin definition and management types.
99

100
```typescript { .api }
101
/**
102
 * Plugin definition - can be a string or tuple with options
103
 */
104
type IPlugin<T = any> = string | [string, T];
105
```
106

107
**Usage Examples:**
108

109
```typescript
110
import { IPlugin } from 'umi-types';
111

112
// String-based plugin
113
const stringPlugin: IPlugin = 'umi-plugin-react';
114

115
// Plugin with options
116
const pluginWithOptions: IPlugin<{ dva: boolean }> = [
117
  'umi-plugin-react',
118
  { dva: true, antd: true }
119
];
120

121
// Array of plugins
122
const plugins: IPlugin[] = [
123
  'umi-plugin-react',
124
  ['umi-plugin-dva', { immer: true }],
125
  ['umi-plugin-locale', { antd: true }],
126
];
127
```
128

129
### Route Configuration
130

131
Route definition and nested routing configuration.
132

133
```typescript { .api }
134
/**
135
 * Route configuration interface for defining application routes
136
 */
137
interface IRoute {
138
  path?: string;
139
  component?: ReactNode;
140
  routes?: IRoute[];
141
  Routes?: string[];
142
  redirect?: string;
143
  [key: string]: any;
144
}
145
```
146

147
**Usage Examples:**
148

149
```typescript
150
import { IRoute } from 'umi-types';
151

152
const routes: IRoute[] = [
153
  {
154
    path: '/',
155
    component: './layouts/BasicLayout',
156
    routes: [
157
      { path: '/home', component: './pages/Home' },
158
      { path: '/users', component: './pages/Users' },
159
      {
160
        path: '/admin',
161
        component: './layouts/AdminLayout',
162
        Routes: ['./routes/PrivateRoute'],
163
        routes: [
164
          { path: '/admin/dashboard', component: './pages/Admin/Dashboard' },
165
          { path: '/admin/users', component: './pages/Admin/Users' },
166
        ],
167
      },
168
    ],
169
  },
170
  {
171
    path: '/login',
172
    component: './pages/Login',
173
  },
174
  {
175
    path: '/404',
176
    component: './pages/404',
177
  },
178
  {
179
    path: '*',
180
    redirect: '/404',
181
  },
182
];
183
```
184

185
### AF-Webpack Configuration
186

187
Comprehensive webpack configuration options for Umi applications.
188

189
```typescript { .api }
190
/**
191
 * AF-Webpack configuration interface with all webpack-related options
192
 */
193
interface IAFWebpackConfig {
194
  alias?: object;
195
  autoprefixer?: object;
196
  babel?: object;
197
  browserslist?: string[];
198
  chainConfig?: any;
199
  copy?: any[];
200
  cssLoaderOptions?: any;
201
  cssModulesExcludes?: string[];
202
  cssModulesWithAffix?: boolean;
203
  cssnano?: object;
204
  cssPublicPath?: string;
205
  generateCssModulesTypings?: boolean;
206
  define?: object;
207
  devServer?: object;
208
  devtool?: string | false;
209
  disableCSSModules?: boolean;
210
  disableCSSSourceMap?: boolean;
211
  disableDynamicImport?: boolean;
212
  disableGlobalVariables?: boolean;
213
  cssLoaderVersion?: 1 | 2;
214
  entry?: any;
215
  env?: object;
216
  es5ImcompatibleVersions?: boolean;
217
  externals?: ExternalsElement;
218
  extraBabelIncludes?: Condition[];
219
  extraBabelPlugins?: any[];
220
  extraBabelPresets?: any[];
221
  extraPostCSSPlugins?: any[];
222
  hash?: boolean;
223
  ignoreMomentLocale?: boolean;
224
  lessLoaderOptions?: any;
225
  manifest?: any;
226
  minimizer?: 'uglifyjs' | 'terserjs';
227
  outputPath?: string;
228
  proxy?: object | [object, Function];
229
  publicPath?: string;
230
  sass?: object;
231
  terserJSOptions?: object;
232
  theme?: string | object;
233
  tsConfigFile?: string;
234
  typescript?: object;
235
  uglifyJSOptions?: object;
236
  urlLoaderExcludes?: Condition[];
237
}
238
```
239

240
**Usage Examples:**
241

242
```typescript
243
import { IAFWebpackConfig } from 'umi-types';
244

245
const webpackConfig: IAFWebpackConfig = {
246
  // Path and output configuration
247
  outputPath: './dist',
248
  publicPath: '/static/',
249
  
250
  // Code splitting and bundling
251
  hash: true,
252
  minimizer: 'terserjs',
253
  
254
  // CSS configuration
255
  disableCSSModules: false,
256
  cssModulesWithAffix: true,
257
  cssModulesExcludes: [
258
    /node_modules/,
259
    /global\.css$/,
260
  ],
261
  
262
  // Babel configuration
263
  extraBabelPlugins: [
264
    ['import', { libraryName: 'antd', style: true }],
265
  ],
266
  extraBabelPresets: [
267
    ['@babel/preset-typescript', { isTSX: true, allExtensions: true }],
268
  ],
269
  
270
  // Module resolution
271
  alias: {
272
    '@': './src',
273
    'components': './src/components',
274
    'utils': './src/utils',
275
  },
276
  
277
  // Development server
278
  devServer: {
279
    port: 8000,
280
    host: '0.0.0.0',
281
    https: false,
282
  },
283
  
284
  // Proxy configuration
285
  proxy: {
286
    '/api': {
287
      target: 'http://localhost:3000',
288
      changeOrigin: true,
289
      pathRewrite: { '^/api': '' },
290
    },
291
  },
292
  
293
  // Environment variables
294
  define: {
295
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
296
    'process.env.API_URL': JSON.stringify(process.env.API_URL),
297
  },
298
  
299
  // Theme configuration (for antd)
300
  theme: {
301
    'primary-color': '#1890ff',
302
    'link-color': '#1890ff',
303
    'success-color': '#52c41a',
304
  },
305
  
306
  // Copy static files
307
  copy: [
308
    { from: 'public', to: 'static' },
309
    { from: 'assets/images', to: 'images' },
310
  ],
311
  
312
  // External libraries
313
  externals: {
314
    react: 'React',
315
    'react-dom': 'ReactDOM',
316
  },
317
};
318
```
319

320
### Static Export Configuration
321

322
Configuration for static site generation and export options.
323

324
```typescript { .api }
325
/**
326
 * Static export configuration options
327
 */
328
interface IExportStaticOpts {
329
  htmlSuffix?: boolean;
330
  dynamicRoot?: boolean;
331
}
332
```
333

334
### SSR Configuration
335

336
Server-side rendering configuration with external library management.
337

338
```typescript { .api }
339
/**
340
 * SSR export configuration with external whitelist options
341
 */
342
type IExportSSROpts =
343
  | {
344
      externalWhitelist?: WhitelistOption[];
345
      nodeExternalsOpts?: object;
346
      manifestFileName?: string;
347
      disableExternal?: boolean;
348
      disableExternalWhiteList?: string[] | object;
349
    }
350
  | boolean;
351

352
type WhitelistOption = string | RegExp;
353
```
354

355
**Usage Examples:**
356

357
```typescript
358
import { IExportSSROpts } from 'umi-types';
359

360
// Enable basic SSR
361
const basicSSR: IExportSSROpts = true;
362

363
// Advanced SSR configuration
364
const advancedSSR: IExportSSROpts = {
365
  // Whitelist libraries that should be bundled
366
  externalWhitelist: [
367
    /^antd/,
368
    'lodash',
369
    /^@babel\/runtime/,
370
  ],
371
  
372
  // Custom manifest file name
373
  manifestFileName: 'ssr-manifest.json',
374
  
375
  // Disable external library exclusion
376
  disableExternal: false,
377
  
378
  // Configure webpack-node-externals
379
  nodeExternalsOpts: {
380
    allowlist: ['antd', /^lodash/],
381
  },
382
};
383
```
384

385
### Mock Configuration
386

387
Development mock server configuration options.
388

389
```typescript { .api }
390
/**
391
 * Mock server configuration options
392
 */
393
interface IMockOpts {
394
  exclude?: string[] | string;
395
}
396
```
397

398
**Usage Examples:**
399

400
```typescript
401
import { IMockOpts } from 'umi-types';
402

403
const mockConfig: IMockOpts = {
404
  exclude: [
405
    'mock/auth.js',    // Exclude specific mock file
406
    'mock/admin/**/*', // Exclude all admin mock files
407
  ],
408
};
409
```
410

411
### Webpack Chain Configuration
412

413
Type for webpack-chain configuration function.
414

415
```typescript { .api }
416
/**
417
 * Webpack configuration change function using webpack-chain
418
 * @param webpackConfig - Webpack chain configuration object
419
 * @param AFWebpack - AF-Webpack utilities including webpack instance
420
 * @returns Modified configuration or void
421
 */
422
interface IChangeWebpackConfigFunc<T, U> {
423
  (webpackConfig: T, AFWebpack: { webpack: U }): T | void;
424
}
425
```
426

427
**Usage Examples:**
428

429
```typescript
430
import { IChangeWebpackConfigFunc, IWebpackChainConfig, IAFWebpackConfig } from 'umi-types';
431

432
const chainWebpack: IChangeWebpackConfigFunc<IWebpackChainConfig, IAFWebpackConfig> = (
433
  config,
434
  { webpack }
435
) => {
436
  // Add custom loader
437
  config.module
438
    .rule('custom-loader')
439
    .test(/\.custom$/)
440
    .use('custom-loader')
441
    .loader(require.resolve('./custom-loader'))
442
    .end();
443

444
  // Modify resolve configuration
445
  config.resolve.alias
446
    .set('@components', './src/components')
447
    .set('@utils', './src/utils');
448

449
  // Add webpack plugin
450
  config.plugin('custom-plugin')
451
    .use(webpack.DefinePlugin, [{
452
      CUSTOM_DEFINE: JSON.stringify('custom-value'),
453
    }]);
454

455
  // Modify optimization
456
  config.optimization
457
    .splitChunks({
458
      chunks: 'all',
459
      cacheGroups: {
460
        vendors: {
461
          test: /[\\/]node_modules[\\/]/,
462
          name: 'vendors',
463
          chunks: 'all',
464
        },
465
      },
466
    });
467

468
  return config;
469
};
470
```