plugin org minicssextractplugin htmlwebpackplugin cannot javascript webpack

javascript - org - webpack html loader



Webpack crea dinámicamente un módulo (3)

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


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>



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 .