Webpack dynamicznie tworzy moduł

Question

Piszę wtyczkę, która tworzy sprite'a SVG. To globs nad katalogami, scalanie plików SVG na jednym obrazie i zwraca wynik. Chodzi o dynamiczne utworzenie modułu (zawierającego scalone obrazy), aby inne moduły mogły go wymagać jako zwykłego modułu. A może zaproponujesz bardziej eleganckie rozwiązanie?

Config

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

Gdzieś we wniosku

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

Answer 1

mam nieco niezbyt eleganckie solution.Combine wszystkich pomostów żylnych (przez powtarzanie nad folderu) do jednego html i ukryj ten fragment kodu HTML za pomocą display:none. Po tych danych wpisz nazwy plików, aby uzyskać do nich dostęp poprzez getElementById(<yourID>).innerHTML. Próbka JSP oparte snippet..or napisać w jakikolwiek język chcesz ..

<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> 

Answer 2

polecam rzucić okiem na ten plugin: https://github.com/rmarscher/virtual-module-webpack-plugin, które pomogą Ci stworzyć plik wirtualny w locie, a następnie można dołącz ten plik do konfiguracji wpisu.

Answer 3

Spróbuj rzucić okiem na to, jak moduły zewnętrzne i delegowane są dostarczane w pakiecie Webpack. Dobrym miejscem na rozpoczęcie jest ExternalModuleFactoryPlugin lub DllReferencePlugin.

Zasadniczo tworzysz wtyczkę dla NormalModuleFactory, która pobiera żądania dla modułów, dopasowujesz te, które powinny zostać rozwiązane do generowanych modułów i możesz asynchronicznie odpowiedzieć na Module.