webpack 切换静态资源的图片不需要重新编译打包

场景

对于已经打包上线的软件，需要切换不同公司的logo图片，这时就需要通过修改dist文件夹下的img图片即可

分析

vue打包的时候一般会携带一个静态资源的文件夹static，我们可以直接查看并修改里面静态资源、图片

问题

发现static-》img下的图片只有一部分，还有一些应用的没有显示

解决

vue-cli3打包的时候，对图片打包进行了优化，默认小于10KB的图片(比如png，注意svg不会)转为base64。
base64就是一串字符串码来表示的图片，在加载页面或者js的时候就一并加载过来，减少图片引用时单独的一次http请求，从而优化http请求，保证页面加速渲染。

设置自己图片打包的限制 vue.config.js文件中添加限制  .tap(options => Object.assign(options, { limit: 2500 })) 

chainWebpack: (config) => {
        config.module
            .rule('images')
            .use('url-loader')
            .tap(options => Object.assign(options, { limit: 2048 })) //超过2500kb的不打包
        const svgRule = config.module.rule('svg')
        svgRule.uses.clear()
        svgRule
            .use('vue-svg-loader')
            .loader('vue-svg-loader')
    },

 拓展

file-loader 使用file-loader打包之后会把对应规则的文件，复制一份到打包之后的文件夹，生成新的文件名，并传给项目的输入文件使用。即返回的是图片的url
url-loader 可以将文件转化为base64，减少这些文件的http请求；但是如果这个图片特比大，那么生成的js文件也会特别的大，那么就会增加加载js的时间； 可以通过limit属性对图片分情况处理，当图片小于limit（单位：byte）大小时转base64，大于limit时调用file-loader对图片进行处理。

参考：

https://www.lizenghai.com/archives/64451.html

https://blog.csdn.net/Bessicxie/article/details/93135672