vue打包通过image-webpack-loader插件对图片压缩优化

本文介绍如何使用image-webpack-loader插件来压缩Vue项目中的图片文件,有效减小打包后的文件体积。通过安装并配置该插件,可以实现对图片资源的自动压缩。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

vue正常打包之后一些图片文件很大,使打包体积很大,通过image-webpack-loader插件可将大的图片进行压缩从而缩小打包体积

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

step2:在build/webpack.base.conf.js中改如下配置

module.exports = {

    module: {

            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
               // loader: 'url-loader',
                // options: {
                    // limit: 100000,
                    // name: utils.assetsPath('img/[name].[hash:7].[ext]')
                // }
                loader: ['url-loader?limit=10000&name=' + utils.assetsPath('img/[name].[hash:7].[ext]'),
                    'image-webpack-loader'
                ]
            },

           
        ]
    },

}

 

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值