四、umi配置

这里主要是umi和webpack系列的配置。这些都是在config/config.js里面配置的

一、基本配置

• (1)plugins: 配置插件列表
  • 类型Array,
  • 默认值[]
  • 介绍：数组项为指向插件的路径，可以是 npm 依赖、相对路径或绝对路径。如果是相对路径，则会从项目根目录开始找。如果插件有参数，则通过数组的形式进行配置，第一项是路径，第二项是参数

export default {
  plugins: [
    // 有参数
    [
      'umi-plugin-react',
      {
        dva: true,
        antd: true,
      },
    ],
    './plugin',
  ],
};

• (2)routes: 配置路由
  • 类型Array,
  • 默认值null
  • 介绍：umi 的路由基于 react-router 实现，配置和 react-router@4 基本一致，详见路由配置章节。component 指向的路由组件文件是从 src/pages 目录开始解析的。如果配置了 routes，则优先使用配置式路由，且约定式路由会不生效

export default {
  routes: [
    {
      path: '/',
      component: '../layouts/index',
      routes: [
        { path: '/user', redirect: '/user/login' },
        { path: '/user/login', component: './user/login' },
      ],
    },
  ],
};

• (3)history: 指定 history 类型
  • 类型String | [String, Object],
  • 默认值browser
  • 介绍：可选 browser、hash 和 memory

export default {
  history: 'hash',
};

• (4)hash: 是否开启 hash 文件后缀
  • 类型Boolean,
  • 默认值false

• (5)outputPath: 指定输出路径
  • 类型String,
  • 默认值./dist
  • 介绍：不允许设置 src 、 public 、 pages 、 mock 、 config 等约定目录

• (6)base: 指定 react-router 的 base，
  • 类型String,
  • 默认值/
  • 介绍：设置所有路由的前缀(即给所有的路由添加一个前缀)，通常用于部署到非根目录
  • 比如，你有路由 / 和 /users，然后设置了 base 为 /foo/，那么就可以通过 /foo/ 和 /foo/users 访问到之前的路由

• (7)publicPath: 指定 webpack 的 publicPath
  • 类型String,
  • 默认值/
  • 介绍：指向静态资源文件，即不需要用webpack打包的文件所在的路径

• (8)runtimePublicPath: 值为 true 时使用 HTML 里指定的 window.publicPath
  • 类型Boolean,
  • 默认值false

• (9)cssPublicPath: 为 CSS 指定额外的 publicPath
  • 类型String,
  • 默认值同 publicPath

• (10)mountElementId: 指定 react app 渲染到的 HTML 元素 id
  • 类型String,
  • 默认值root

• (11)targets: 配置浏览器最低版本
  • 类型Object,
  • 默认值(即默认支持的浏览器版本),{ chrome: 49, firefox: 45, safari: 10, edge: 13, ios: 10 }
  • 介绍：会自动引入 polyfill 和做语法转换，配置的 targets 会合并到默认值，所以不需要重复配置

// 比如要兼容 ie11，需配置
export default {
  targets: {
    ie: 11,
  },
};

• (12)context: 配置全局 context
  • 类型Object,
  • 默认值{}
  • 介绍：会覆盖到每个 pages 里的 context

• (13)exportStatic: 如果设为 true 或 Object，则导出全部路由为静态页面，否则默认只输出一个 index.html
  • 类型Boolean | Object,
  • 默认值false

• (14)exportStatic.dynamicRoot: 部署到任意路径
  • 类型Boolean,
  • 默认值false

二、webpack配置

• (1)chainWebpack: 通过 webpack-chain 的 API 扩展或修改 webpack 配置

// 具体到下面config.js
import webpackPlugin from './plugin.config';
export default {
  chainWebpack: webpackPlugin,
};
// 下面为plugin.config.js
export default (config, { webpack }) => {
  // 设置 alias
  config.resolve.alias.set('a', 'path/to/a');
  // 删除进度条插件
  config.plugins.delete('progress');
};

• (2)theme: 配置主题，实际上是配 less 变量
  • 介绍：支持对象和字符串两种类型，字符串需要指向一个返回配置的文件

"theme": {
  "@primary-color": "#1DA57A"
}
// 或者："theme": "./theme-config.js"

• (3)define: 作用就是在这里面定义一个变量，然后就可以在代码的其余地方，直接使用变量名来访问这个变量，目的是为了有可能在浏览器环境，读取不到node变量，这时候就可以使用这个值来进行读取。
  • 如下，在package.json里面定义了一个node变量， 叫 MODE
  • 然后在其它文件中 就可以使用 process.env.MODE 来访问这个node变量，然后根据它不同的值，来使用不同的配置文件

// config.js
import { tempRouter } from './config.custom';
export default {
    "define": {
      "process.env.TEST": 1,
      "USE_COMMA": 2,
      APP_MODE: process.env.MODE, // 就是在这里定义一个 APP_MODE 变量, 然后在其它页面中就可以直接用这个 变量名 来进行访问
    },
    routes: tempRouter,
};

// package.json
{
    "scripts": {
        "dev": "cross-env MODE=demo umi dev" // 这里定义了一个node变量，叫 MODE , 值为demo
        "dev2": "cross-env MODE=demo2 umi dev" // 这里定义了一个node变量，叫 MODE , 值为demo2
    }
}

// config.custom.js。法一 配置式
import router1 from './router.config';
import router2 from './router.config.demo2';
let tempRouter = '';
switch(process.env.MODE) { // 这里直接使用这个node变量，就可以通过这个 MODE 变量，不同的值，来使用不同的配置文件
    case demo: tempRouter = router1; break;
    default: tempRouter = router2; break;
}
export default {
  tempRouter,
};

// defaultSettings.js。法一 配置式
import defaultSetting1 from './defaultSettings.custom.js';
import defaultSetting2 from './defaultSettings.custom.demo2.js';
let tempDefaultSettings = '';
switch(process.env.MODE || APP_MODE) { // 这里直接调用 process.env.MODE 有可能会失败，所以加上后面的 APP_MODE 进行兼容，然后就好了
    case demo: tempDefaultSettings = defaultSetting1; break;
    default: tempDefaultSettings = defaultSetting2; break;
}
export default {
  tempDefaultSettings,
};


// 下面使用require进行导入的原因是，import默认是静态引入，所以里面不能加表达式，除非使用import(); 而require是动态导入的，所以可以加表达式
// config.custom.js。法二 约定式，即根据文件名，来直接判断
const mode = process.env.MODE || APP_MODE;
const pageRoutes = require(`./router.config.${mode}`).default; // 这里要使用node的 require 来进行导入。并且由于 router.config.${mode} 文件是用的es6的默认导出，则在使用require的情况下，需要加上一个default属性，才可以获取到值
export default {
  pageRoutes,
};


// defaultSettings.js。法二 约定式，即根据文件名，来直接判断
const mode = process.env.MODE || APP_MODE;
const customSettings = require(`./defaultSettings.custom.${mode}.js`); // 这里也是要使用node的 require 来进行导入。
module.exports = {
  ...customSettings,
};

• (4)alias: 配置 webpack 的 resolve.alias 属性

• (5)devServer: 配置 webpack 的 devServer 属性。即配置开发服务器。属性如下
  • port，端口号，默认 8000
  • host，默认 0.0.0.0
  • https，是否启用 https server
  • http2，是否启用 http2
  • writeToDisk，生成 assets 到文件系统

• (6)proxy: 配置 webpack-dev-server 的 proxy 属性。配置了这个之后，虽然是可以直接连接到配置的target上面去，不过在控制台里面的Request URL，依然是http://localhost:8000
  • 介绍：如果要代理请求到其他服务器，可以如下配置

// 然后访问 /api/users 就能访问到 http://jsonplaceholder.typicode.com/users 的数据
"proxy": {
  "/api": {
    "target": "http://jsonplaceholder.typicode.com/",
    "changeOrigin": true,
    "pathRewrite": { "^/api" : "" }
  }
}

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

"manifest": {
  "basePath": "/app/"
}

• (8)ignoreMomentLocale: 忽略 moment 的 locale 文件，用于减少尺寸

ignoreMomentLocale: true,

• (9)lessLoaderOptions: 给 less-loader 的额外配置项

lessLoaderOptions: {javascriptEnabled: true,}

• (10)cssLoaderOptions: 给 css-loader 的额外配置项
  • 类型````,
  • 默认值````
  • 介绍：

  cssLoaderOptions: {
    modules: true,
    getLocalIdent: (context, localIdentName, localName) => {
    ...
      return localName;
    },
  }