Webpack 动态创建模块答案

【问题标题】：Webpack dynamically create a moduleWebpack 动态创建模块
【发布时间】：2015-10-20 07:18:23
【问题描述】：

我正在编写一个创建 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);

【问题讨论】：

我正在尝试做类似的事情。很想知道如何从插件中注入模块。
你试过webpack-svgstore-plugin吗？看起来它解决了同样的问题。
@Kreozot svgstore-plugin 做了不同的事情——它在 webpack 编译期间发出资产。我想像使用常规模块一样使用 svg 并仅构建所需的文件。我写svg-sprite-loader（高度实验性）。
@4m1r 正确的做法是编写一个加载器（参见 Webpack 作者 Tobias Koppers 的 comment）。
你已经有一个非“优雅”的解决方案了吗？感觉就像你试图一次做太多的事情。你应该能够使用 webpack 来组合你所有的 svg 并输出一个 svg 与加载器和一个插件来捆绑它们。弄清楚后，您需要确定如何在应用中使用它。

标签： javascript webpack

【解决方案1】：

我有一个不太优雅的解决方案。将所有 svgs（通过迭代文件夹）合并到一个 html 中，并用 display:none 隐藏该 html sn-p。将 ids 作为文件名，然后 ucan 访问它们通过getElementById(<yourID>).innerHTML。基于 jsp 的 sn-p 示例..或用您想要的任何语言编写..

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

【讨论】：

【解决方案2】：

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

本质上，您为 NormalModuleFactory 创建一个插件，该插件接受模块请求，匹配那些应该解析到您正在生成的模块的插件，并且您可以使用 Module 异步响应。

【讨论】：