webpack配置阻止静态资源被解析为base64

环境：

umi，qiankun

需求：

网页的favicon想使用OSS的方式引入，当静态资源为url引入时会自动发布到OSS上，利用这个功能把favicon发布到OSS上然后引入为favicon

问题：

umi中的静态资源图片，小于10K的会自动编译为base64直接使用，不会发布为url；而使用inlineLimit之后所有的静态资源图片都会用url引入，不利于优化。放在public中引入的方式在qiankun中不好使，无法解析public中的文件。需要一个特殊标识符来对不需要解析为base64的图片跳过编译。

解决方式：

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

npm下载file-loader url-loader

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

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

配置chainWebpack

// umi有个单独的配置，需要在loader函数中加入loader名。仅在use中写入loader名不生效
  
chainWebpack(config, { env, webpack, createCSSRule }) {
    config.module.rule("discompile-image")
      .test(/\.discompile.png$/) // 带有.discompile的文件不被编译为base64
      .use("url-loader")
      .loader("url-loader") // 使用url-loader或file-loader
      .options({
        // 小于1字节的文件编译为base64
        limit: 1, 
        // 导出地址，导出名
        name: "static/[name].[hash:8].[ext]"
      })
  },

 文件名

- assets

  - favicon.discomile.png