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

最新推荐文章于 2025-03-31 16:22:37 发布

przlovecsdn

最新推荐文章于 2025-03-31 16:22:37 发布

阅读量1.5w

点赞数

分类专栏： webpack VUE 文章标签： vue打包 image-webpackl-loader 图片压缩减小打包体积 webpack

本文链接：https://blog.youkuaiyun.com/przlovecsdn/article/details/82761606

版权

VUE 同时被 2 个专栏收录

10 篇文章

订阅专栏

webpack

6 篇文章

订阅专栏

本文介绍如何使用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'
                ]
            },

           
        ]
    },

}