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

尝试查看Webpack中如何提供外部和委派模块。一个好的起点是ExternalModuleFactoryPlugin或DllReferencePlugin。

基本上，你为xsl:otherwise创建了一个插件，它接受模块的请求，你匹配那些应该解析你正在生成的模块的插件，你可以用NormalModuleFactory异步响应。

Answer 2

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

Webpack动态创建一个模块

2 个答案: