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

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

przlovecsdn

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

阅读量2.9k

点赞数

分类专栏： webpack React 文章标签： react打包 image-webpack-loader 图片优化图片压缩 webpack

本文链接：https://blog.csdn.net/przlovecsdn/article/details/82761471

版权

webpack 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

React

6 篇文章 0 订阅

订阅专栏

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

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

step2：在config/webpack.config.prod.js中改如下配置

module.exports = {
    module: {
        strictExportPresence: true,
        rules: [
            {
                oneOf: [
                    {
                        test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
                        // loader: require.resolve('url-loader'),
                        // options: {
                        //     limit: 10000,
                        //     // name: 'static/media/[name].[hash:8].[ext]',
                        // },
                        loader: [require.resolve('url-loader') + '?limit=10000&name=static/media/[name].[hash:8].[ext]',
                            'image-webpack-loader'
                        ]
                    },

        ],
    },
};