vue中使用image-webpack-loader

前言：vue打包后图片文件很大，使打包体积很大，通过image-webpack-loader插件可将大的图片进行压缩从而缩小打包体积。webpack用url-loader转为base64后，文件变大，因此使用image-webpack-loader来压缩。

1、参考文档

https://www.npmjs.com/package/image-webpack-loader

2、使用

npm install image-webpack-loader --save-dev

3、更改配置(在build/webpack.base.conf.js中改如下配置)

module: {
    rules: [
                { 
                    {
                    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                    use:[
                        {
                        loader: 'url-loader',
                        options: {
                          limit: 10000,
                          name: utils.assetsPath('img/[name].[hash:7].[ext]')
                          }
                        },
                        {
                          loader: 'image-webpack-loader',// 压缩图片
                          options: {
                            bypassOnDebug: true,
                        }
                    }
                ]
            }
        },
    ]
}

思考：压缩是成功了，但是所有图片都转成了base64。然后不用image-webpack-loader,那么小的图片是base64,大不得还是原来的格式，这是什么原因？是image-webpack-loader在转换前把图片压小了吗？所以都小于limit，所以都转换成了base64吗？

原因：这个问题，如果用url-loader做一个限制，少于多少字节之后，使用url-lodaer，如果是大图片的话，使用image-webpack-loader，他是在执行过后 将图片进行压缩的。