Webpack dynamically create a module

Question

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 (which contains merged images) so that other modules can require it as an usual module. Or maybe you can suggest a more elegant solution?

Config

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

Somewhere in the application

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

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

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