config.ts 项目配置

umi4 config文档 https://umijs.org/docs/api/config

config.ts

import { defineConfig } from '@umijs/max';
import { join } from 'path';
import defaultSettings from './defaultSettings';
import proxy from './proxy';
import routes from './routes';
const { REACT_APP_ENV, NODE_ENV } = process.env;
const isEnvProduction = NODE_ENV === "production";
export default defineConfig({
  title: defaultSettings.title,
  outputPath: 'build',
  publicPath: './',
  hash: false,
  history: {type: 'hash'}, // 
  targets: {
      ie: 11,
  },
  // umi routes: https://umijs.org/docs/routing
  routes,
  theme: {
    'root-entry-name': 'variable',
  },
  ignoreMomentLocale: true,
  proxy: proxy[REACT_APP_ENV || 'dev'],
  manifest: {
    basePath: '/',
  },
  fastRefresh: true,
  model: {},
  initialState: {},
  layout: {
    locale: true,
    siderWidth: 200,
    ...defaultSettings,
  },
  locale: {
    default: 'zh-CN',
    antd: true,
    // default true, when it is true, will use `navigator.language` overwrite default
    baseNavigator: true,
  },
  antd: {},
  // 生产环境去除 console日志打印
  terserOptions: {
    compress: {
      drop_console: isEnvProduction,
    },
  },
  nodeModulesTransform: {
    // build 先留着 all，避免线上依赖代码里没有编译 es5
    type: process.env.NODE_ENV === 'development' ? 'none' : 'all',
  },
  // dynamicImport: {
  //   loading: "@/components/PageLoading/index",
  // },
  // devServer: {
  //   open: true,
  //   port: 8367,
  // },
  // useRequest https://umijs.org/docs/max/request
  request: {},
  access: {},
  presets: ['umi-presets-pro'],
  // 基于 openapi 的规范生成serve 和mock，能减少很多样板代码
  openAPI: [
    {
      requestLibPath: "import { request } from '@umijs/max'",
      // 或者使用在线的版本
      // schemaPath: "https://gw.alipayobjects.com/os/antfincdn/M%24jrzTTYJN/oneapi.json"
      schemaPath: join(__dirname, 'oneapi.json'),
      mock: false,
    },
    {
      requestLibPath: "import { request } from '@umijs/max'",
      schemaPath: 'https://gw.alipayobjects.com/os/antfincdn/CA1dOm%2631B/openapi.json',
      projectName: 'swagger',
    },
  ],
});

umijs .env

项目根目录，新建 .env，写入键值对配置
config.ts 设置 process.env，不然 .env 文件无效

export default defineConfig({
  'process.env': process.env,
  'process.env.UMI_ENV': 'dev',
})

defualtSetting.json

chainWebpack

扩展 umi 内置的 webpack 配置，基于 webpack-chain

• config, 现有 webpack 配置
• args 一些额外信息和辅助对象，目前有 env 和 webpack
  • env 为当前环境，值为 development 或 production
  • webpack 为 webpack 对象，可从中获取 webpack 内置插件

https://github.com/neutrinojs/webpack-chain
https://umijs.org/docs/api/config#chainwebpack

• 修改 js文件输出目录
• 修改 图片输出目录
• 添加 gzip压缩 ```javascript import CompressionWebpackPlugin from ‘compression-webpack-plugin’

const assetDir = “static”; const isEnvProduction = process.env.NODE_ENV === “production”;

function chainWebpack(config, args) { const { env, webpack, createCSSRule } = args; // 修改 js chunk文件输出目录 config .output .filename(assetDir + ‘/js/[name].[hash:8].js’) .chunkFilename(assetDir + ‘/js/[name].[contenthash:8].chunk.js’);

// 修改css输出目录 config .plugin(“extract-css”) .tap(() => [ { filename: ${assetDir}/css/[name].[contenthash:8].css, chunkFilename: ${assetDir}/css/[name].[contenthash:8].chunk.css, ignoreOrder: true, }, ]);

// 修改图片输出目录 config .module .rule(“images”) .test(/.(png|jpe?g|gif|webp|ico)(\?.*)?$/) .use(“url-loader”) .loader(require.resolve(“url-loader”)) .tap((options) => { const newOptions = { …options, name: assetDir + “/img/[name].[hash:8].[ext]”, fallback: { …options.fallback, options: { name: assetDir + “/img/[name].[hash:8].[ext]”, esModule: false, }, }, }; return newOptions; });

// 修改svg输出目录 config .module .rule(“svg”) .test(/.(svg)(\?.*)?$/) .use(“file-loader”) .loader(require.resolve(“file-loader”)) .tap((options) => ({ …options, name: assetDir + “/img/[name].[hash:8].[ext]”, }));

// 修改fonts输出目录 config .module .rule(“fonts”) .test(/.(eot|woff|woff2|ttf)(\?.*)?$/) .use(“file-loader”) .loader(require.resolve(“file-loader”)) .tap((options) => ({ …options, name: assetDir + “/fonts/[name].[hash:8].[ext]”, fallback: { …options.fallback, options: { name: assetDir + “/fonts/[name].[hash:8].[ext]”, esModule: false, }, }, }));

// 添加gzip压缩 config .when(isEnvProduction, (conf) => { conf .plugin(“compression-webpack-plugin”) .use(CompressionWebpackPlugin, [ { filename: “[path].gz[query]”, algorithm: “gzip”, test: new RegExp(“\.(js|css)$”), threshold: 10240, minRatio: 0.8, }, ]); }); }

export default chainWebpack ```