Umi 4 使用自定义 loader 的方法说明

[fz6m]

默认文件处理方式

默认情况下，在 umi 4 中导入不支持的后缀的文件，会一律视为静态资源处理，这意味着：

import fileUrl from './some-file.unknown'

// `/some-file.[hash].unknown`
console.log(fileUrl)

如没有特殊需求，可以自行使用 fetch(fileUrl) 获取到该文件后进行处理。

使用自定义 loader

普通 loader

一个自定义 loader 的例子如下：

  pnpm add -D some-loader

// .umirc.ts

export default {
  chainWebpack(config) {

    const SOME_REG = /\.(some)$/

    // 🟡 排除对不认识的后缀文件视为 静态资源 的处理规则
    config.module.rule('asset').exclude.add(SOME_REG).end();

    // 🟢 新增自己的 loader
    config.module
      .rule('some') // ← 此处名字任意
      .test(SOME_REG)
      .exclude.add(/node_modules/)
      .end()
      .use('some-loader') // ← 此处名字任意
      .loader('some-loader') // ← 此处为 loader 加载位置，使用包位置或绝对路径均可
      .end()

  },
};

资源加载类型

当你需要变更指定文件的 资源加载类型 （如希望 内联文件内容 等）时，添加对应的 webpack 5 静态资源处理类型即可，如：

// .umirc.ts

export default {
  chainWebpack(config) {

    const FONT_REG = /\.(eot|woff2?|ttf)$/

    config.module.rule('asset').exclude.add(FONT_REG).end();

    config.module
      .rule('fonts')
      .test(FONT_REG)
      // ↓ 此处根据 静态资源加载类型 的不同，实际行为不同
      //   `asset/inline` 在 webpack 4 中为 `url-loader`
      .type('asset/inline') 
      .end()

  },
};

关于可用的 type 类型，详见：Webpack Asset Modules

拓展：配置 webassembly 的加载 例子 。

对 ts / js 文件处理的 loader

添加一个处理所有 ts / js 源码文件时，优先运行处理的 loader ：

// .umirc.ts

export default {
  chainWebpack(config) {

    const RULES = ['src', 'jsx-ts-tsx', 'extra-src']
    RULES.forEach((rule) => {
      config.module
        .rule(rule)
        .use('pre-transform-js-and-ts-file-loader')
        .loader('pre-transform-js-and-ts-file-loader')
        .options({
          // ...
        })
        .end()
    })

  },
};

操作处理 css 样式文件 loader 的 rule 位置：

// .umirc.ts

export default {
  chainWebpack(config) {
    config.module.rule(
      'css', // or `less` / `sass`
    )
  },
};

[xiaohuoni]

// 🟡 排除对不认识的后缀文件视为 静态资源 的处理规则
    config.module.rule('asset').exclude.add(SOME_REG).end();

好像不排除，直接加 loader 也能正确构建产物，会有什么隐患吗？

[fz6m]

貌似在你的自定义 loader 里处理成 js 代码，后续当做 js 来运行的话，是进不了 asset fallback 的，就没事。但还是排除掉比较安全，确保只有唯一的你自己的 loader 规则在处理这些文件。

“对所有不认识的后缀文件默认当静态文件处理” ← 这也是 umi 4 里独特的行为，因为大部分 cli 工具其实遇到不认识的后缀都会报错告诉你处理不了，所以多一步 asset 排除也在所难免。

[PeachScript]

不知道是否存在必须 exclude 的场景，能通过 type 来解的场景还是倾向于让开发者不感知 Umi 内部 rule