Как добавить хеш версии к файлам стиля через веб-пакет?

Как я могу добавить хеш версии к файлам (изображениям / шрифтам) через веб-пакет? В примере у меня есть стиль в источнике:

header.scss

.image__logo {
    background-image: url(/assets/images/logo.png);
}

После компиляции мне нужен хеш версии в качестве постфикса имени файла (или будет лучше увидеть метку времени последнего изменения этого файла):

header.css

.image__logo {
    background-image: url(/assets/images/logo.png?3f5e48a065eb836da00d);
}

Я попытался добавить загрузчик, но ничего не вышло:

    {
      test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
      loader: 'file-loader?name=[name].[ext]?[hash]!extract-loader!html-loader'
    }

javascript webpack webpack-file-loader

01.10.2018 17:19

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

147

Ответы 2

Я думаю, проблема заключается в вопросительном знаке в шаблоне имени файла, который нарушает строку запроса. Попробуйте указать имя явно через options, например.:

{
    test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
    use: [
        {
            loader: "file-loader",
            options: {
                name: "[name].[ext]?[hash]"
            }
        },
        {
            loader: "extract-loader"
        },
        {
            loader: "html-loader"
        }
    ]
}

01.10.2018 18:03

{
    test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
    use: [
        {
            loader: 'file-loader',
            options: {
                name: '[name].[ext]?[hash]'
            }
        },
    ]
}

Простая публикация кода не очень полезна. Вы можете объяснить свой код? Таким образом, другие смогут понять и извлечь уроки из вашего ответа, а не просто копировать и вставлять какой-то код из Интернета.

— 01.10.2018 18:37

01.10.2018 18:18