Как подружить webpack 5 и sprite.svg?

Question

[malayamarisha]

Всем привет.
Настроен webpack 5 для работы с изображениями (из документации):

{
                test: /\.(jpe?g|png|webp|gif|svg)$/i,
                use: [
                    {
                        loader: 'image-webpack-loader',
                        options: {
                            mozjpeg: {
                                progressive: true,
                            },
                            // optipng.enabled: false will disable optipng
                            optipng: {
                                enabled: false,
                            },
                            pngquant: {
                                quality: [0.65, 0.90],
                                speed: 4
                            },
                            gifsicle: {
                                interlaced: false,
                            },
                            // the webp option will enable WEBP
                            webp: {
                                quality: 75
                            }
                        }
                    }
                ],
                type: 'asset/resource',
            },

Изображения при сборке проекта добавляются в dist/assets, sprite создается, но он пустой.
В исходниках sprite рабочий.
Подскажите, как скорректировать сборку, чтобы sprite был рабочим?

Comments

[Антон Антон]

sprite.svg чем "создается"? Или это просто готовый файл? Если готовый, то его прозе из src/assets в public перенести (обычно так называется папка, в которую переносятся файлы напрямую в сборку, без обработки. если такой папки нет, то стоит создать и подключить через https://webpack.js.org/plugins/copy-webpack-plugin/)

[malayamarisha]

Антон Антон, sprite.svg изначально был создан вручную, точно рабочий )
Пример:

<svg display="none" xmlns="http://www.w3.org/2000/svg">
       <symbol id="search" viewBox="0 0 512.005 512.005">
        <path d="M505.749 475.587l-145.6-145.6c28.203-34.837 45.184-79.104 45.184-127.317C405.333 90.926 314.41.003 202.666.003S0 90.925 0 202.669s90.923 202.667 202.667 202.667c48.213 0 92.48-16.981 127.317-45.184l145.6 145.6c4.16 4.16 9.621 6.251 15.083 6.251s10.923-2.091 15.083-6.251c8.341-8.341 8.341-21.824-.001-30.165zM202.667 362.669c-88.235 0-160-71.765-160-160s71.765-160 160-160 160 71.765 160 160-71.766 160-160 160z"/>
    </symbol>
</svg>

Да, в прод можно будет скопировать. Но сейчас на стадии разработки необходимо поработать с иконками, а они не отображаются.

С jpg проблем нет (в scss указан путь background: url("img/code9.jpg") center no-repeat;), в публичной части localhost:3000/assets/code9.jpg

А вот с svg проблема (в scss background-image: url("img/sprite.svg#search");), в публичной части localhost:3000/assets/sprite.svg#search, но при переходе по ссылке "This XML file does not appear to have any style information associated with it. The document tree is shown below.".
Для тестирования собираю проект и вижу, что svg пустой.

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const mode = process.env.NODE_ENV || 'development';

const devMode = mode === 'development';

const target = devMode ? 'web' : 'browserslist';
const devtool = devMode ? 'source-map' : undefined;

module.exports = {
    mode,
    target,
    devtool,
    devServer: {
        port: 3000,
        open: true,
        hot: true,
    },
    entry: ["@babel/polyfill", path.resolve(__dirname, 'src', 'index.js')],
    output: {
        path: path.resolve(__dirname, 'dist'),
        clean: true,
        filename: '[name].[contenthash].js',
        assetModuleFilename: 'assets/[name][ext]'
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, 'src', 'index.html')
        }),
        new MiniCssExtractPlugin({
            filename: '[name].[contenthash].css',
        })
    ],
    module: {
        rules: [
            {
                test: /\.html$/i,
                loader: 'html-loader',
            },
            {
                test: /\.(c|sa|sc)ss$/i,
                use: [
                    devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
                    'css-loader',
                    {
                        loader: "postcss-loader",
                        options: {
                            postcssOptions: {
                                plugins: [require('postcss-preset-env')],
                            }
                        }
                    },
                    'sass-loader',
                ],
            },
            {
                test: /\.woff2?$/i,
                type: 'asset/resource',
                generator: {
                    filename: 'fonts/[name][ext]'
                }
            },
            {
                test: /\.(jpe?g|png|webp|gif|svg)$/i,
                use: [
                    {
                        loader: 'image-webpack-loader',
                        options: {
                            mozjpeg: {
                                progressive: true,
                            },
                            // optipng.enabled: false will disable optipng
                            optipng: {
                                enabled: false,
                            },
                            pngquant: {
                                quality: [0.65, 0.90],
                                speed: 4
                            },
                            gifsicle: {
                                interlaced: false,
                            },
                            // the webp option will enable WEBP
                            webp: {
                                quality: 75
                            }
                        }
                    }
                ],
                type: 'asset/resource',
            },
            {
                test: /\.m?js$/i,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
        ]
    }
}

[Антон Антон]

malayamarisha, ну я ж говорю - положи его в то место, откуда копируется без обработки, а не в ассеты. а лучше - генери через https://www.npmjs.com/package/webpack5-svg-sprite-... , а в ассетах пусть лежат исходные svg

[malayamarisha]

Антон Антон, в проекте физически папки assets отсутствует. Папка генерируется автоматически (assetModuleFilename: 'assets/[name][ext]').
Изначально, все изображения лежат в img.
Assets физически создается только при "build:dev": "set NODE_ENV=development&&webpack" или "build:prod": "set NODE_ENV=production&&webpack",
При start-e проекта ("start": "set NODE_ENV=development&&webpack serve"), физически папки assets также нет, но в публичной части ссылается на localhost:3000/assets/sprite.svg#search

а лучше - генери через https://www.npmjs.com/package/webpack5-svg-sprite

- установлен:

const SpriteLoaderPlugin = require('svg-sprite-loader/plugin');
plugins: [
        new SpriteLoaderPlugin()
    ],

.......
 {
                test: /\.svg$/,
                loader: 'svg-sprite-loader',
                options: {
                    extract : true ,
                    publicPath : '/'
                }
            }

Переходя по localhost:3000/assets/sprite.svg#search ошибка:
This page contains the following errors: error on line 1 at column 1: Document is empty. Below is a rendering of the page up to the first error.
Если собрать проект (build:prod), то svg не пустой, но с отличающейся от исходника структурой .

[Антон Антон]

malayamarisha, под папкой assets я не имею ввиду конкретное название папки (как и для папки public), просто в большинстве бойлерплэйтов, которые я видел, эти папки (которая с процессингом вебпаком и которая просто копируется) - называются так. Соответственно, если у вас в проекте не так, но хочется, чтобы процессинга не было - нужно сделать какое-то место, откуда это все будет просто копироваться через webpack-copy-plugin.

[Антон Антон]

а лучше - генери через https://www.npmjs.com/package/webpack5-svg-sprite

- установлен:

получается два обработчика svg. Надо бы разделить, например с помощью resourceQuery: '?sprite' (при этом у image-loader указать пустую строку) и импортировать как import iconName from 'path/to/file.svg?sprite'

[malayamarisha]

Надо бы разделить, например с помощью resourceQuery: '?sprite'

- если верно понимаю:

{
                test: /\.(jpe?g|png|webp|gif|svg)$/i,
                resourceQuery: '',
                use: [
                    {
                        loader: 'image-webpack-loader',
                        options: {
                            mozjpeg: {
                                progressive: true,
                            },
                            // optipng.enabled: false will disable optipng
                            optipng: {
                                enabled: false,
                            },
                            pngquant: {
                                quality: [0.65, 0.90],
                                speed: 4
                            },
                            gifsicle: {
                                interlaced: false,
                            },
                            // the webp option will enable WEBP
                            webp: {
                                quality: 75
                            }
                        }
                    }
                ],
                type: 'asset/resource',
            },
{
                test: /\.svg$/,
                loader: 'svg-sprite-loader',
                resourceQuery: '?sprite',
                options: {
                    extract : true ,
                    publicPath : '/assets/'
                }
            }

В index.js добавлен import iconName from './img/sprite.svg?sprite'.

Если вывести iconName в консоль . svg создается с другой структурой

Если не добавлять import iconName from './img/sprite.svg?sprite', то svg рабочий (если выводить с помощью use в html), но в background-image: url("./img/sprite.svg#search") все равно пустой