Webpack动态创建一个模块

Question

我正在编写一个创建SVG精灵的插件.它遍布目录,在一个图像中合并SVG文件并返回结果.我们的想法是动态创建一个模块(包含合并的图像),以便其他模块可以将其作为常用模块.或者您可以建议更优雅的解决方案？

配置

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

Answer 1

我有一个不太优雅的解决方案。将所有 svgs（通过迭代文件夹）合并到一个 html 中，并用 隐藏该 html 片段。将display:noneids 作为文件名，然后 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>