vue -cli3压缩图片配置

安装image-webpack-loader插件

1、如果先前尝试使用 yarn 或 npm 安装过，一定要先卸载掉，然后用 cnpm 安装

yarn remove image-webpack-loader   // npm uninstall image-webpack-loader

2、使用 cnpm 安装  image-webpack-loader 会发现很快就安装好了，【手动滑稽】

cnpm install --save-dev  image-webpack-loader 

注：如果先前尝试使用 yarn 或 npm 安装过，一定要先卸载掉用 cnpm 安装

在vue.config.js当中进行配置

chainWebpack: config => {
        const imagesRule = config.module.rule('images')
        imagesRule
            .use('image-webpack-loader')
            .loader('image-webpack-loader')
            .options({
                bypassOnDebug: true
            })
            .end()
    },

然后进行打包，图片的压缩最高可达60%以上。

如果在nuxt项目直接下载 image-webpack-loader即可，不用进行配置，也能达到效果。