javascript - org - webpack html loader

Webpack crea dinámicamente un módulo

Question

Estoy escribiendo un complemento que crea un sprite SVG. Engloba los directorios, combina archivos SVG en una imagen y devuelve el resultado. La idea es crear dinámicamente un módulo (que contenga imágenes fusionadas) para que otros módulos puedan requerirlo como un módulo habitual. ¿O tal vez puede sugerir una solución más elegante?

Config

{
plugins: [
new SvgSpritePlugin({
sprites: {
icons: ''images/svg/icons/*.svg'',
logos: ''images/svg/logos/*.svg'',
socials: ''images/svg/logos/{twitter,youtube,facebook}.svg'',
}
})
]
}

En algún lugar de la aplicación

var logosSprite = require(''sprite/logos''); // require dynamically created module
document.body.appendChild(logoSprite);

Answer 1

Tengo una solución un tanto no tan elegante. Combine todas las svgs (iterando sobre la carpeta) en un html y oculte ese fragmento html con una display:none Tenga los identificadores como el nombre del archivo y luego acceda a ellos por getElementById(<yourID>).innerHTML . Muestra de un fragmento basado en jsp ... o escriba en el idioma que desee ...

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

Answer 2

Recomiendo echar un vistazo a este complemento: https://github.com/rmarscher/virtual-module-webpack-plugin , que te ayuda a crear un archivo virtual sobre la marcha, y luego podrías incluir este archivo en la configuración de entrada.

Answer 3

Intente echar un vistazo a cómo se proporcionan los módulos externos y delegados en Webpack. Un buen lugar para comenzar es ExternalModuleFactoryPlugin o DllReferencePlugin .

Básicamente, usted crea un complemento para la NormalModuleFactory que toma solicitudes de módulos, NormalModuleFactory los que deben resolverse con los módulos que está generando y puede responder asincrónicamente con un Module .