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

- kisenka

---

我也在尝试做类似的事情。非常想知道如何从插件中注入一个模块。 - 4m1r

你尝试过webpack-svgstore-plugin吗？看起来它解决了同样的问题。 - Kreozot

@Kreozot svgstore-plugin 做的事情不同 - 它在 webpack 编译期间发出资产。我想像处理常规模块一样处理 SVG，并仅构建所需文件。我编写了 svg-sprite-loader（高度实验性）。 - kisenka

@4m1r 正确的做法是编写一个加载器（请参见 webpack 作者 Tobias Koppers 的评论）。 - kisenka

你是否已有非“优雅”的解决方案呢？感觉你试图一次完成太多任务了。你应该能够使用 webpack 将所有的 SVG 组合在一起，并输出一个包含加载器和插件的单个 SVG。一旦你搞清楚了，你需要确定如何在应用程序中提供它。 - Andrei R

我建议您查看这个插件：https://github.com/rmarscher/virtual-module-webpack-plugin，它可以帮助您动态创建虚拟文件，然后您可以在入口配置中包含此文件。 - Evi Song

Answer 1

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

基本上，您需要为NormalModuleFactory创建一个插件，该插件接收有关模块的请求，匹配应解析为您正在生成的模块的请求，并可以异步响应一个Module。

- Filip Dupanović

Answer 2

我有一个不太优雅的解决方案。通过遍历文件夹将所有svg组合成一个html，并使用display:none隐藏该html片段。使用文件名作为id，然后可以通过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>

- Koustav Ray