vue如何将图片压缩成webp格式并用webpack打包

一.vue-cli将图片转化成webp格式

1.安装vue-webp-plugin

npm install --save vue-webp-plugin

2.配置webp-plugin（在main.js中插入下面代码）

import WebpPlugun from 'vue-webp-plugin';
Vue.use(WebpPlugun);

3.使用方法：
方法1：url可以为数组配合v-for使用，但是不能为数组单独使用

<img v-webp="url"/>
<script>
    export default {
        data() {
            return {
                url: require('static/home_top_bg.png')
            }
        }
    }
</script>

方法2：远程图片

<img v-webp="'https://h5.u51.com/99fenqi/vue//static/home_top_bg.png'"/>

方法3：设置背景图片

<div v-webp:bg="require('static/home_top_bg.png')"></div>

他帮你优先引入webp图片，如果没有webp图片就会加载jpg图片

二、用webpack将jpg图片打包一份为webp图片

1.下载webp-loader（已经有webp图片可以跳过这部直接webpack打包）

npm install webp-loader --save-dev   //webpack打包webp

2.找到webpack.base.conf.js文件配置loader(这是webpack的配置文件)
3.找到module 下的打包图片的loader（如下）

将png|jpe?g|删除然后另外创一个如下

代码：

{
        test: /\.(gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(jpe?g|png)$/i,
        loaders: [
          'file-loader',
          'webp-loader'
          ]
      },

然后npm run build 就可以了

下面说一下vue-webp-plugin的一些坑和用法（可跳过）

在只用过程中，url可以为数组,但只限于v-for使用如下

<div class="foot">
          <div class="foot2" v-for="(item,index) in items1" :key="index">
            <img :src="item.src" alt />
          </div>
<script>
data() {//此处省略了很多代码
    return {
    items1:[]//存储图片路径
    }
    },
    mounted(){//通过mounted批量插入图片路径，这样就不用一个一个定义
    let arr = this.items1;
    for(let i = 0;i<9;i++){
    arr[i].src = require('../../image/'+(i+1)+'.jpg');//插入items1 9张图片路径
	}
}
</script>

上面是正确的用法，但是用如下就会报错

<div class="foot">
          <div class="foot2">
            <img :src="item[0]" alt />//这里没用v-for
          </div>
<script>
data() {//此处省略了很多代码
    return {
    items1:[]//存储图片路径
    }
    },
    mounted(){//通过mounted批量插入图片路径，这样就不用一个一个定义
    let arr = this.items1;
    for(let i = 0;i<9;i++){
    arr[i] = require('../../image/'+(i+1)+'.jpg');//插入items1 9张图片路径
	}
}
</script>

你会发现会报错，由于vue-webp-plugin的作者没做数组兼容，所以只能通过v-for配合数组使用，而单独使用的时候只能单独定义图片路径