webpack url-loader limit 转换部分资源为base64格式 其余不转换

在Vue-cli中，我们默认使用webpack将所有的小于限制数值的资源转为base64格式：如下：{ test: /.(png|jpe?g|gif|svg)(?.)?$/, loader: ‘url-loader’, options: { limit: 10, } }, /limit: 10,限制 图片大小 10B，小于限制会将图片转换为 base64格式/ 这样做的好处是：将资源转化为base64可以尽可能的减少网络请求次数、提前加载图片（网络不好时候提前显示图片），但是也有很大的缺点，这也是这篇文章主要想表达的问题。使用base64的缺点大概有：1、若转化的图片太大，导致数据太大，加载过慢，所以一般像Vue在limit通常默认设置的是10000B。2、使用base64的资源将不会拥有缓存，即如果些张图片被用来做为有频率切换动画（例如自定义模拟喇叭播放的动画）这样就会由于图片没有缓存而反复请求导致其他的资源请求排队，pending时间从几秒到一分钟不等的问题。3、在微信小程序里，我们知道背景图片是只能使用base64格式的，但若是其他的静态资源不想使用base64又该如何呢？下面这种情况是对于不同格式的图片的定义方法，可以根据不同格式的图片做自定义配置：//webpack.js 中loader配置{ test: /.(gif|jpg)$/, loader: ‘url-loader?limit=10000’, options: { name: ‘[name].[ext]?[hash]’ }},{ test: /.(png|svg)$/,//(png|jpg|gif|svg) loader: ‘url-loader’, options: { limit: 10, name: utils.assetsPath(‘img/[name].[hash:7].[ext]’) }}假如我们想使用一部分base64格式的图片（音频、视频），做法如下：/webpack.base.conf.js/module: { rules: [ { test: /.(png|jpe?g|gif|svg)(?.)?$/, loader: ‘url-loader’, options: { limit: 10, name: ‘static/images/[name].[ext]’, } } ]} /* page/index.vue /<script> let { image_k1 } = { // ！注释很重要 / eslint import/no-webpack-loader-syntax: off */ image_k1: require(’!url-loader?limit=10000!../../static/images/image_k1.png’) } </script><template> <div :style="{backgroundImage:url(${image_k1})}"></div></template>这样就完成了某些资源是base64，其他资源不变的效果。当然 你也可以选择直接在线转换后放到css里然后引用，效果一样。