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的缺点大概有：
一、若转化的图片太大，致使数据太大，加载过慢，因此通常像Vue在limit一般默认设置的是10000B。
二、使用base64的资源将不会拥有缓存，即若是些张图片被用来作为有频率切换动画（例如自定义模拟喇叭播放的动画）这样就会因为图片没有缓存而反复请求致使其余的资源请求排队，pending时间从几秒到一分钟不等的问题。
三、在微信小程序里，咱们知道背景图片是只能使用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里而后引用，效果同样。