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
.