Webpack динамически создает модуль

Я пишу плагин, который создает спрайт SVG. Он просматривает каталоги, объединяет SVG файлы в одном изображении и возвращает результат. Идея состоит в том, чтобы динамически создавать модуль (содержащий объединенные изображения), чтобы другие модули могли требовать его как обычного модуля. Или, может быть, вы можете предложить более элегантное решение?

Config

{
  plugins: [
    new SvgSpritePlugin({
      sprites: {
        icons: 'images/svg/icons/*.svg',
        logos: 'images/svg/logos/*.svg',
        socials: 'images/svg/logos/{twitter,youtube,facebook}.svg',
      }
    })
  ]
}

Где-то в приложении

var logosSprite = require('sprite/logos'); // require dynamically created module
document.body.appendChild(logoSprite);

Ответ 1

У меня есть несколько не очень элегантное решение. Соедините все svg (путем итерации по папке) в один html и скройте этот html-фрагмент с помощью display:none. Имеем идентификаторы как fileName и ucan, затем обращаемся к ним через getElementById(<yourID>).innerHTML. Пример фрагмента на основе jsp.. или напишите в зависимости от того, какой язык вам нужен.

<div id="hiddenSVGSprite" style="dispaly:none">
 <i><span id="Download" ><%@include file="svg/Download.svg" %>/span>Download</i>
 <i><span id="DownloadFAQs" ><%@include file="svg/DownloadFAQs.svg" %> </span>DownloadFAQs</i>
 <i><span id="DownloadQuickReferenceGuide" ><%@include file="svg/DownloadQuickReferenceGuide.svg" %> </span>DownloadQuickReferenceGuide</i>
 <i><span id="DownloadUserManual" ><%@include file="svg/DownloadUserManual.svg" %> </span>DownloadUserManual</i>
</div>

Ответ 2

Я рекомендую посмотреть этот плагин: https://github.com/rmarscher/virtual-module-webpack-plugin, которые помогут вам создать виртуальный файл "на лету", а затем вы можете включить этот файл в конфигурацию записи.

Ответ 3

Попробуйте взглянуть на то, как внешние и делегированные модули предоставляются в Webpack. Хорошим местом для начала является ExternalModuleFactoryPlugin или DllReferencePlugin.

По существу, вы создаете плагин для NormalModuleFactory, который принимает запросы для модулей, вы сопоставляете те, которые должны разрешаться с генерируемыми вами модулями, и вы можете асинхронно отвечать с помощью Module.