Как сжать изображения через веб-пакет 4 - PullRequest
Новая
       13

Как сжать изображения через веб-пакет 4

0 голосов
/ 31 мая 2018

Мне нужно сжимать изображения, такие как TinyPNG, и сохранять сжатые изображения в папке dist.Я использую webpack 4 и нашел imagemin-webpack. Но я не понимаю, что использовать: плагин или загрузчик?Пожалуйста, помогите выполнить настройку для этой задачи. 

let path = require('path');
let ExtractTextPlugin = require("extract-text-webpack-plugin");
let {imageminLoader} = require("imagemin-webpack");
let imageminGifsicle = require("imagemin-gifsicle");

let conf = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, './dist/'),
        filename: 'main.js',
        publicPath: 'dist/'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: [
                        {
                            loader: "css-loader",
                            options: {
                                minimize: true,
                                sourceMap: true
                            }
                        }
                    ]

                })
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                use: [
                    {
                        loader: "file-loader"
                    },
                    {
                        loader: imageminLoader,
                        options: {
                            cache: true,
                            bail: false,
                            imageminOptions: {
                                plugins: [imageminGifsicle()]
                            },
                            name: "[hash]-compressed.[ext]"
                        }
                    }
                ]
            }

        ]
    },
    plugins: [
        new ExtractTextPlugin("styles.css"),
    ]
};

Это мой файл конфигурации.После запуска команды build ничего не происходит с изображениями.

1 Ответ

0 голосов
/ 12 марта 2019

Для сжатия изображений в Webpack 4 я использую " img-loader ". 

            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                loaders: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '' + imgPath + '[name].[ext]'
                        }
                    },
                    {
                        loader: 'img-loader',
                        options: {
                            plugins: [
                                imageminGifsicle({
                                    interlaced: false
                                }),
                                imageminMozjpeg({
                                    progressive: true,
                                    arithmetic: false
                                }),
                                imageminPngquant({
                                    floyd: 0.5,
                                    speed: 2
                                }),
                                imageminSvgo({
                                    plugins: [
                                        { removeTitle: true },
                                        { convertPathData: false }
                                    ]
                                })
                            ]
                        }
                    }
                ]
            }

Конечно, это обязательные переменные: 

const imgPath = './assets/img/';
const imageminGifsicle = require("imagemin-gifsicle");
const imageminPngquant = require("imagemin-pngquant");
const imageminSvgo = require("imagemin-svgo");
const imageminMozjpeg = require('imagemin-mozjpeg');
...