Webpack Dynamically Create A Module

I am writing a plugin which creates a SVG sprite. It globs over the directories, merge SVG files in one image and returns the result. The idea is to dynamically create a module (wh

Solution 1:

Try taking a look at how external and delegated modules are provided in Webpack. A good place to start is the ExternalModuleFactoryPlugin or DllReferencePlugin.

Essentially, you create a plugin for the NormalModuleFactory which takes requests for modules, you match those which should resolve to the modules you are generating and you can asynchronously respond with a Module.

Solution 2:

I have a somewhat not-so-elegant solution.Combine all svgs(by iterating over folder)into one html and hide that html snippet with a display:none.Have the ids as the fileName and ucan then access them by getElementById(<yourID>).innerHTML. Sample of jsp based snippet..or write in whichever language you want..

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