关于组件库中所引用图片该如何打包的问题

场景

有时候没有 svg 图标，需要用 png 等格式图片作为图标，势必也要将图片打包进组件里方才可以让人使用。

常见错误

将图片放入根目录的 public 文件夹中

参考地址：umijs.org/zh-CN/docs/…

由于 dumi 基于 umi，集成了 umi 的配置，有些人（比如我）可能会参考 umi 的文档在根目录下新建 public 文件夹，并将图片放入，此方法在开发环境下确实可行，但生产环境会无效，因为打包工具没有将图片打包出来。
哈哈所以联想延伸有时候能很好的解决问题，但有时候过于联想延伸，也不完全是解决问题的良药呀。
开发环境

生产环境（打包后）

解决方法

像类似使用图片的方式有两种：

1. img 中使用图片
   1. 先 import 后使用（是倒是能打包出来，但是仍是以文件的形式，umd 情况下需要使用方自行引入，esm 和 cjs 是 babel 编译，倒是没有这个问题）
   2. 直接在 img 的 src 中写上图片的路径（这种类似动态解析，运行时才会加载，但运行时的目录下却没有需要的图片呢）
2. css 中类似 background-image 的属性使用图片（同上）

所以如果想要图片打包出来，方法步骤是：

1. 统一使用方式，import 引入图片
2. 在 webpack、rollup 等打包工具用 loader、plugin 对引入的图片做解析
   1. 有条件的，统一上传到 oss，调整路径（但是这是组件库，好像又不太妥）
   2. 没条件的，都转成 base64 吧（大图片好像又太占空间了）

最后需要注意的是：
虽然方法步骤中的原理是如上，但是针对 ①“img 中使用图片”和 ②“css 中使用图片”具体操作是不同的。
如 rollup，针对 ① 是使用 @rollup/plugin-url 插件，针对 ② 是使用 postcss-url，在 blue-design 的 fatherjs 打包配置中是这样的：

import url from '@rollup/plugin-url';
import postcssurl from 'postcss-url';

export default {
  esm: 'babel',
  cjs: 'babel',
  umd: {
    globals: {
      blued: 'blued',
    },
    name: 'blued',
    file: 'blued',
  },
  extractCSS: true,
  extraRollupPlugins: [
    url({
      // 1MB
      limit: 1 * 1024 * 1024,
    }),
  ],
  extraPostCSSPlugins: [
    postcssurl({
      url: 'inline',
    }),
  ],
};

如 webpack，针对 ① 是使用 url-loader，针对 ② 还是使用 url-loader，webpack 针对 css 中的 url，css-loader会把它当成一种webpack的资源去 import，所以情况有变成了和 ① 一样。

参考

你还可以在以下地址找到本文：

• 语雀@blueju