前端 - umijs 怎么配置图片小于多少kb打包成base64？

Question

umijs 怎么配置图片小于多少kb打包成base64？help

我查看打包出来的文件，好像还是("img",{className:b.state==="doing"?"doingMove":"",style:{background:"#fff",borderRadius:"50%",marginRight:"6px",width:"40px"},src:"/icon/doing.png"})}),(0,e.jsx)

 chainWebpack(config, { env, webpack }) {    // 添加对图片的处理，小于40KB的图片将被打包成Base64    config.module      .rule('images')      .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)      .use('url-loader')      .loader('url-loader')      .options({        limit: 1024 * 1024 * 40, // 这里设置限制大小，单位是字节（bytes）        name: 'img/[name].[hash:7].[ext]',      })      .end();    // 还可以进行其他自定义Webpack配置    return config;  } <img                  className={tableData.state === 'doing' ? 'doingMove' : ''}                  style={{                    background: '#fff',                    borderRadius: '50%',                    marginRight: '6px',                    width: '40px',                  }}                  src={'/icon/doing.png'}                />

Answer 1

找一下config文件里：

import { defineConfig } from 'umi';export default defineConfig({  // ...其他配置  chainWebpack(config) {    config.module      .rule('images')      .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)      .use('url-loader')      .loader('url-loader')      .options({        limit: 10000, // 这里设置限制大小，单位是字节（bytes），10000字节 ≈ 10KB        name: 'img/[name].[hash:7].[ext]',      })      .end();  },});

Answer 2

在umijs中，没有直接配置将图片打包成base64的方式，因为它不直接涉及到构建或打包的过程。umijs是一个基于webpack的UI框架，它主要关注的是组件和UI的设计，而不是底层的构建和打包过程。

然而，你可以通过修改webpack的配置来实现这样的需求。在webpack中，你可以使用file-loader或url-loader插件来处理图片，并通过设置它们的大小限制来控制图片是否被转化为base64。

下面是一个简单的示例配置，超过100kb的图片将被转化为base64，而小于100kb的图片则会被作为URL引用：

// webpack.config.jsmodule.exports = {  //...  module: {    rules: [      {        test: /\.(png|jpe?g|gif|svg)$/i,        use: [          {            loader: 'url-loader',            options: {              limit: 100 * 1024, // 100kb              outputPath: 'images', // 打包后的图片存放目录              publicPath: '/images', // 生成的url路径前缀              name: '[name].[hash].[ext]' // 文件名及后缀            }          }        ]      }    ]  }}

在这个配置中，limit属性是关键，它指定了只有当文件大小超过这个值（本例中是100kb）时，才会将文件转化为base64编码。如果文件大小小于这个值，将会作为外部链接（URL）引用。

需要注意的是，这个配置需要安装并引入url-loader这个webpack插件。你可以通过npm或yarn来安装它：

npm install --save-dev url-loader# 或yarn add --dev url-loader

然后，在你的项目中引入它：

// webpack.config.jsconst UrlLoader = require('url-loader');//...

这样就可以在webpack构建过程中处理图片了。