vuecli5.x 配置图片输出为base64

是阿臻2023-07-23 23:28

解释：webpack的默认配置是小于一定的文件大小就要将图片转为base64, 所以尽量将这个阈值调大你的图片就可以转为base64; 当然这种做法不好, 会导致代码文件变大, 不过为了满足需求也没得办法。这年头大家都用 vite 了, 网上没有 vuecli5.x 这方面的记录, 写篇文章记下, 给其他人留盏明灯

添加下面的配置

js 复制代码

  chainWebpack: (config) => {
    // 配置图片的 loader
    config.module
      .rule('images')
      .test(/\.(png|jpe?g|gif|webp)(\?.*)?$/)
      .set('parser', {
        dataUrlCondition: {
          maxSize: 400 * 1024, // 4kb
        },
      })
  },

为什么不是下面的配置

js 复制代码

 chainWebpack: config => {
        config.module
            .rule('images')
            .test(/.(jpg|png|gif)$/)
            .tap(options => Object.assign(options, { limit: 1024 * 1024 })); // 1M
        })
    }

摘抄自webpack文档

言下之意, 以前的三个 loader 在webpack5.x 版本已经不用了, 取而代之的是 4 种模块类型

webpack 文档