umi webpack配置图片资源转base64

问题

在使用微前端过程中，子应用图片出现404问题，在设置了路径情况下依然404，发现背景图的资源地址不走公共路径，那就只能另辟捷径了，似乎转成base64是个好的方式。

通常情况下umi中的静态资源图片，小于10K的会自动编译为base64直接使用。但是超过10k的就得另外处理了

解决方式：

使用chainWebpack配置对带有标识的静态资源使用loader

npm下载file-loader url-loader
file-loader提供将静态资源作为模块引入的能力，url-loader比file-loader更强大，但是依赖于file-loader

npm i --save-dev file-loader url-loader

umirc文件配置webpack

chainWebpack(config) {
    config.module
      .rule('images')
      // 匹配文件后缀
      .test(/\.(png|jpe?g|gif|svg)$/)
      .use('url-loader')
      .loader('url-loader') 
      .options({
        // 小于多少字节的文件编译为base64
        limit: 81920,
        // 导出地址，导出名
        name: "static/[name].[hash:8].[ext]"
      })
      .end()
  },