Check umi document for more configuration
-Type: string
-Default: /
Set the routing prefix, usually used to deploy to a non-root directory.
For example, if you have routes /
and /users
, and then set the base to /foo/
, then you can access the previous routes through /foo/
and /foo/users
.
-Type: Function
Modify the webpack configuration through the API of webpack-chain.
such as:
export default {chainWebpack(memo, { env, webpack, createCSSRule }) {// set aliasmemo.resolve.alias.set('foo', '/tmp/a/b/foo');// Delete the umi built-in pluginmemo.plugins.delete('progress');memo.plugins.delete('friendly-error');memo.plugins.delete('copy');},};
Support asynchronous,
export default {async chainWebpack(memo) {await delay(100);memo.resolve.alias.set('foo', '/tmp/a/b/foo');},};
When SSR, modify the server-side build configuration
import { BundlerConfigType } from 'umi';export default {chainWebpack(memo, { type }) {// Modification of ssr bundler configif (type === BundlerConfigType.ssr) {// Server-side rendering build extension}// Modification of csr bundler configif (type === BundlerConfigType.csr) {// Client rendering build extension}// Both ssr and csr are extended},};
The parameters are:
-memo, the current webpack-chain object -env, current environment, development
, production
or test
etc. -webpack, webpack instance, used to get its internal plug-ins -createCSSRule, used to extend other CSS implementations, such as sass, stylus -type, the current webpack instance type, csr is used by default, if ssr is turned on, there will be a webpack instance of ssr
-Type: object
-Default: {}
Configure the development server.
Contains the following sub-configuration items:
-port, port number, default 8000
-host, default 0.0.0.0
-https, whether https server is enabled, and HTTP/2 will also be enabled -writeToDisk, generate assets
to the file system
The enabled port and host can also be specified temporarily through the environment variables PORT and HOST.
-Type: string
-Default: cheap-module-source-map
in dev, false
in build
The user configures the sourcemap type.
Common optional types are:
-eval, the fastest type, but does not support lower version browsers, if the compilation is slow, you can try -source-map, the slowest and most comprehensive type
For more details, please refer to webpack#devtool configuration.
-Type: object
-Default: false
Whether to enable on-demand loading, that is, whether to split the build product, download additional JS and execute it when needed.
When closed by default, only one js and one css will be generated, namely umi.js
and umi.css
. The advantage is that it is worry-free and easy to deploy; the disadvantage is that it will be slower for users to open the website for the first time.
It usually looks like this after packaging,
+ dist-umi.js-umi.css-index.html
After enabling, you need to consider the configuration of publicPath, and you may also need to consider runtimePublicPath, because you need to know where to load resources such as JS, CSS, and images asynchronously.
This is usually the case after packaging,
+ dist-umi.js-umi.css-index.html-p__index.js-p__users__index.js
The p__users_index.js
here is the path src/pages/users/index
where the routing component is located, where src
will be ignored, and pages
will be replaced with p
.
Contains the following sub-configuration items,
-loading, the type is a string, pointing to the loading component file
such as:
export default {dynamicImport: {loading: '@/Loading',},};
Then create a new Loading.tsx
in the src directory,
import React from 'react';export default () => {return <div>Loading...</div>;};
After construction, use low network simulation to see the effect.
-Type: object
-Default: false
If you don't need to load routes on demand, but only need to support code splitting with import()
syntax, you can use this configuration.
such as:
export default {dynamicImportSyntax: {},};
-Type: object
Configure the output format of html, and only output index.html
by default.
If you need pre-rendering, please enable the ssr configuration, which is commonly used to solve the problem of speeding up the SEO and first-screen rendering of the page when there is no server.
If you enable exportStatic
, html files will be output for each route.
Contains the following attributes:
-htmlSuffix, enable the .html
suffix. -dynamicRoot, deploy to any path. -extraRoutePaths, generate additional route pages, see [Pre-rendering dynamic routing](/zh-CN/docs/ssr#Pre-rendering dynamic routing)
-Type: object
-Default: {}
Set which modules can not be packaged, and import them through <script>
or other methods, which usually need to be used together with scripts or headScripts configuration.
such as,
export default {externals: {react: 'window.React',},scripts: ['https://unpkg.com/react@17.0.1/umd/react.production.min.js'],};
In simple understanding, it can be understood that import react from'react'
will be replaced with const react = window.React
.
-Type: object
Fast refresh (Fast Refresh), you can keep the component state during development, while editing to provide instant feedback.
-Type: boolean
-Default: false
Configure whether to include the hash suffix in the generated file, which is usually used for incremental publishing and to prevent the browser from loading the cache.
After enabling hash, the product usually looks like this,
+ dist-logo.sw892d.png-umi.df723s.js-umi.8sd8fw.css-index.html
Note:
-html files never have a hash
-Type: Array
-Default: []
Configure the extra script in <head>
, the array items are strings or objects.
In most scenarios, the string format is sufficient, such as:
export default {headScripts: [`alert(1);`, `https://a.com/b.js`],};
Will generate HTML,
<head><script>alert(1);</script><script src="https://a.com/b.js"></script></head>
If you want to use additional attributes, you can use the object format,
export default {headScripts: [{ src: '/foo.js', defer: true },{ content: `alert('Hello');`, charset: 'utf-8' },],};
Will generate HTML,
<head><script src="/foo.js" defer></script><script charset="utf-8">alert('Hello');</script></head>
-Type: object
-Default: { type:'browser' }
Configure history type and configuration items.
Contains the following sub-configuration items:
-type, optional browser
, hash
and memory
-options, the configuration items passed to create{{{ type }}}History, the configuration items of each type are different
note,
-In options, getUserConfirmation
does not support configuration because it is a function format -In options, basename
does not need to be configured, it is specified by umi's base
configuration
-Type: Array
-Default: []
Configure additional link tags.
-Type: string
-Default: dist
Specify the output path.
note:
-It is not allowed to set as a convention directory such as src
, public
, pages
, mock
, and config
-Type: object
-Default: {}
Configure agent capabilities.
export default {proxy: {'/api': {'target':'http://jsonplaceholder.typicode.com/','changeOrigin': true,'pathRewrite': {'^/api':'' },},},}
Then you can access the data of http://jsonplaceholder.typicode.com/users by visiting /api/users
.
Note: The proxy configuration only takes effect in dev.
-Type: publicPath
-Default: /
Configure the publicPath of webpack. When packaging, webpack will add the value of publicPath
in front of the static file path. When you need to modify the static file address, such as using CDN deployment, set the value of publicPath
to the value of CDN. If you use some special file systems, such as hybrid development or cordova technologies, you can try to set publicPath
to ./
relative path.
The relative path
./
has some limitations, for example, it does not support multi-layer routing/foo/bar
, but only supports single-layer path/foo
If your application is deployed on a sub-path of the domain name, such as https://www.your-app.com/foo/
, you need to set the publicPath
to /foo/
, if you also want to take into account the normal development environment For debugging, you can configure it like this:
import { defineConfig } from 'umi';export default defineConfig({publicPath: process.env.NODE_ENV === 'production' ? '/foo/' : '/',});
-Type: Array(route)
Configure routing.
umi's routing is implemented based on react-router@5, and the configuration is basically the same as that of react-router, see [Routing Configuration](. /docs/routing) chapter.
such as:
export default {routes: [{path: '/',component: '@/layouts/index',routes: [{ path: '/user', redirect: '/user/login' },{ path: '/user/login', component: './user/login' },],},],};
note:
-If the value of component
is a relative path, it will start parsing with src/pages
as the base path -If routes
is configured, profile routing is preferred, and conventional routing will not take effect
-Type: boolean
-Default: false
Configure whether to enable runtime publicPath.
It is usually used for a set of codes that have different publicPath requirements in different environments, and then publicPath is output by the server through the HTML global variable window.publicPath
.
After enabling, this paragraph will be added when packaging,
__webpack_public_path__ = window.resourceBaseUrl || window.publicPath;
Then webpack will start searching from window.resourceBaseUrl
or window.publicPath
when loading resource files such as JS asynchronously.
-Type: object
-Default: { chrome: 49, firefox: 64, safari: 10, edge: 13, ios: 10 }
The configuration requires a compatible minimum version of the browser, and the polyfill and syntax conversion will be automatically introduced.
For example, to be compatible with ie11, you need to configure:
export default {targets: {ie: 11,},};
note:
-The configured targets will be merged to the default value, no need to repeat the configuration -The sub-item configuration is false
to delete the version number of the default configuration
-Type: object
-Default: {}
Configuring the theme is actually configuring less variables.
such as:
export default {theme: {'@primary-color': '#1DA57A',},};