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

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

        ],
    },
};

 

你可能感兴趣的:(webpack,React)