配置

基本配置

plugins

  • 类型：Array
  • 默认值：[]

指定插件。

比如：

  1. export default {
  2.   plugins: [
  3.     //1. 插件名，无参数
  4.     'umi-plugin-react',
  5.     //2. 插件有参数时为数组，数组的第二项是参数，类似 babel 插件
  6.     //['umi-plugin-react', {
  7.     //  dva: true,
  8.     //  antd: true,
  9.     //}],
  10.   ],
  11. };

routes

  • 类型：Array
  • 默认值：null

配置路由。

::: tip 提醒
如果配置了 routes，则约定式路由会不生效。
:::

disableRedirectHoist

  • 类型：Boolean
  • 默认值：false

禁用 redirect 上提。

出于一些原因的考虑，我们在处理路由时把所有 redirect 声明提到路由最前面进行匹配，但这导致了一些问题，所以添加了这个配置项，禁用 redirect 上提。

history

  • 类型：String
  • 默认值：browser

如需切换 history 方式为 hash（默认是 browser history），配置 history: 'hash'。

outputPath

  • 类型：String
  • 默认值：./dist

指定输出路径。

base

  • 类型：String
  • 默认值：/

指定 react-router 的 base，部署到非根目录时需要配置。

publicPath

  • 类型：String
  • 默认值：/

指定 webpack 的 publicPath，指向静态资源文件所在的路径。

runtimePublicPath

  • 类型：Boolean
  • 默认值：false

值为 true 时使用 HTML 里指定的 window.publicPath。

" class="reference-link">cssPublicPath

  • 类型：String
  • 默认值：同 publicPath

为 CSS 指定额外的 publicPath 。

mountElementId

  • 类型：String
  • 默认值：root

指定 react app 渲染到的 HTML 元素 id。

minimizer

  • 类型：String
  • 默认值：uglifyjs
  • 选项：uglifyjs|terserjs

Which minimizer to use. UglifyJS does not support es6 while terser does.

hash

  • Type: Boolean
  • Default: false

是否开启 hash 文件后缀。

" class="reference-link">targets

  • Type: Object
  • Default: { chrome: 49, firefox: 45, safari: 10, edge: 13, ios: 10 }

配置浏览器最低版本，会自动引入 polyfill 和做语法转换，配置的 targets 会和合并到默认值，所以不需要重复配置。

比如要兼容 ie11，需配置：

  1. export default {
  2.   targets: {
  3.     ie: 11,
  4.   },
  5. };

context

  • 类型：Object
  • 默认值：{}

配置全局 context，会覆盖到每个 pages 里的 context。

exportStatic

  • 类型：Boolean | Object
  • 默认值：false

如果设为 true 或 Object，则导出全部路由为静态页面，否则默认只输出一个 index.html。

比如：

  1. "exportStatic": {}

exportStatic.htmlSuffix

  • 类型：Boolean
  • 默认值：false

启用 .html 后缀。

exportStatic.dynamicRoot

  • 类型：Boolean
  • 默认值：false

部署到任意路径。

singular

  • 类型：Boolean
  • 默认值：false

如果设为 true，启用单数模式的目录。

  • src/layout/index.js
  • src/page
  • model（如果有开启 umi-plugin-dva 插件的话）

webpack

chainWebpack

通过 webpack-chain 的 API 扩展或修改 webpack 配置。

比如：

  1. chainWebpack(config, { webpack }) {
  2.   // 设置 alias
  3.   config.resolve.alias.set('a', 'path/to/a');
  5.   // 删除进度条插件
  6.   config.plugins.delete('progress');
  7. }

打包优化 uglifyjs-webpack-plugin 配置

  1. chainWebpack(config, { webpack }) {
  2.   config.merge({
  3.     plugin: {
  4.       install: {
  5.         plugin: require('uglifyjs-webpack-plugin'),
  6.         args: [{
  7.           sourceMap: false,
  8.           uglifyOptions: {
  9.             compress: {
  10.               // 删除所有的 `console` 语句
  11.               drop_console: true,
  12.             },
  13.             output: {
  14.               // 最紧凑的输出
  15.               beautify: false,
  16.               // 删除所有的注释
  17.               comments: false,
  18.             },
  19.           }
  20.         }]
  21.       }
  22.     }
  23.   })
  24. }

theme

配置主题，实际上是配 less 变量。支持对象和字符串两种类型，字符串需要指向一个返回配置的文件。
比如：

  1. "theme": {
  2.   "@primary-color": "#1DA57A"
  3. }

或者，

  1. "theme": "./theme-config.js"

define

通过 webpack 的 DefinePlugin 传递给代码，值会自动做 JSON.stringify 处理。
比如：

  1. "define": {
  2.   "process.env.TEST": 1,
  3.   "USE_COMMA": 2,
  4. }

externals

配置 webpack 的?externals?属性。
比如：

  1. // 配置 react 和 react-dom 不打入代码
  2. "externals": {
  3.   "react": "window.React",
  4.   "react-dom": "window.ReactDOM"
  5. }

alias

配置 webpack 的 resolve.alias 属性。

devtool

配置 webpack 的 devtool 属性。

disableCSSModules

禁用 CSS Modules。

disableCSSSourceMap

禁用 CSS 的 SourceMap 生成。

extraBabelPresets

定义额外的 babel preset 列表，格式为数组。

extraBabelPlugins

定义额外的 babel plugin 列表，格式为数组。

extraBabelIncludes

定义额外需要做 babel 转换的文件匹配列表，格式为数组，数组项是 webpack#Condition。

extraPostCSSPlugins

定义额外的 PostCSS 插件，格式为数组。

cssModulesExcludes

指定项目目录下的文件不走 css modules，格式为数组，项必须是 css 或 less 文件。

copy

定义需要单纯做复制的文件列表，格式为数组，项的格式参考 copy-webpack-plugin 的配置。

比如：

  1. "copy": [
  2.   {
  3.     "from": "",
  4.     "to": ""
  5.   }
  6. ]

proxy

配置 webpack-dev-server 的 proxy 属性。
如果要代理请求到其他服务器，可以这样配：

  1. "proxy": {
  2.   "/api": {
  3.     "target": "http://jsonplaceholder.typicode.com/",
  4.     "changeOrigin": true,
  5.     "pathRewrite": { "^/api" : "" }
  6.   }
  7. }

然后访问?/api/users?就能访问到?http://jsonplaceholder.typicode.com/users?的数据。

sass

配置 node-sass 的选项。注意：使用 sass 时需在项目目录安装 node-sass 和 sass-loader 依赖。

manifest

配置后会生成 manifest.json，option 传给 https://www.npmjs.com/package/webpack-manifest-plugin。
比如：

  1. "manifest": {
  2.   "basePath": "/app/"
  3. }

ignoreMomentLocale

忽略 moment 的 locale 文件，用于减少尺寸。

lessLoaderOptions

给 less-loader 的额外配置项。

cssLoaderOptions

给 css-loader 的额外配置项。