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

最新推荐文章于 2024-08-09 07:12:04 发布

原创最新推荐文章于 2024-08-09 07:12:04 发布 · 1.5w 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue打包 #image-webpackl-loader #图片压缩 #减小打包体积 #webpack

VUE 同时被 2 个专栏收录

10 篇文章

订阅专栏

webpack

6 篇文章

订阅专栏

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

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'
                ]
            },

           
        ]
    },

}