Как вы справляетесь с распаковкой SVG с помощью webpack и серверной рендеринга?

Question

У меня есть необходимость как для встроенного SVG (в настоящее время используется спрайт с использованием <svg><use xlinkHref="icons.svg#info" /></svg>), так и SVG, используемый в качестве фона в CSS (background-image: url(/assets/svg/info.svg);).

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

{ 
    test: /\.svg$/i, 
    loader: 'file-loader', 
    query: { 
    name: 'svg/[name]-[sha512:hash:base64:7].[ext]', 
    publicPath: PATHS.public 
    } 
} 

Однако, я хочу быть в состоянии обратиться к личности Значки SVG встроены, гарантируя, что исходные файлы имеют хешированное имя файла.

Есть ли у кого-нибудь надежный подход к получению лучшего из обоих миров?

В конечном счете я хочу иметь исходную папку из SVG-файлов, которые во время сборки являются:

1. Индивидуально имеют свои имена файлов хэшируются
2. Все компилируется спрайт, который имеет урезанный имя файла и затем для использовать с тегом <svg>?

Спасибо, Dan

Answer 1

Оказывается здесь, что проблема была довольно проста, я не был запущен в Sass загрузчик как над клиентом и сервером JavaScript.

Пока я работаю над этой проблемой, я держу отдельный демонстрационный репозиторий, чтобы создать хорошее место для сервера и клиента, получившего React с Webpack, и хороший готовый пакет для обработки активов.

https://github.com/danielrosewarne/webpack-demo

Надежда, что помогает!