javascript - Webpack dynamically create a module - Stack Overflow

admin管理员组

文章数量:1391924

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

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

• javascript
• webpack

Share Improve this question Follow edited Jul 29, 2015 at 11:17 Calcolat 89822 gold badges1111 silver badges2222 bronze badges asked Jul 29, 2015 at 10:45 kisenkakisenka 17188 bronze badges 6

• I'm trying to do a similar thing. Would love to know how to inject a module from a plugin. – 4m1r Commented Jul 29, 2015 at 17:26
• Did you try webpack-svgstore-plugin? Looks like it solves the same problem. – Kreozot Commented Sep 9, 2015 at 11:21
• @Kreozot svgstore-plugin does different thing - it emit assets during webpack pilation. I want to work with svg like with regular modules and build only required files. I write svg-sprite-loader (highly experimental). – kisenka Commented Sep 10, 2015 at 12:11
• 1 @4m1r the right way to doing this is to write a loader (see the ment from Tobias Koppers, the webpack author). – kisenka Commented Sep 10, 2015 at 12:19
• 1 do you have a non-"elegant" solution for this already? Feels like you're trying to do too many things at once. You should be able to use webpack to bine all your svg and output a single svg with loaders and a plugin to bunch them all. Once you've figured it out, you need to determine how to make it available in the app. – Andrei R Commented Nov 17, 2015 at 23:02

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 3

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.

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>

本文标签： javascriptWebpack dynamically create a moduleStack Overflow