Webpack crea dinamicamente un modulo

Sto scrivendo un plugin che crea uno sprite SVG. Globisce sulle directory, unisce i file SVG in un'immagine e restituisce il risultato. L'idea è di creare dinamicamente un modulo (che contiene immagini unite) in modo che altri moduli possano richiederlo come un modulo usuale. O forse puoi suggerire una soluzione più elegante?Webpack crea dinamicamente un modulo

Config

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

Da qualche parte nell'applicazione

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

fonte

2015-07-29 kisenka

Sto provando a fare una cosa simile. Mi piacerebbe sapere come iniettare un modulo da un plugin. – 4m1r

Hai provato [webpack-svgstore-plugin] (https://github.com/lgordey/webpack-svgstore-plugin)? Sembra che risolva lo stesso problema. – Kreozot

@Kreozot svgstore-plugin fa una cosa diversa - emette risorse durante la compilazione del webpack. Voglio lavorare con svg come con i moduli regolari e creare solo i file richiesti. Scrivo [svg-sprite-loader] (http://github.com/kisenka/webpack-svg-sprite-loader) (altamente sperimentale). – kisenka

ho un po 'non-così-elegante solution.Combine tutti SVG (per l'iterazione di una cartella) in un unico html e nascondi lo snippet html con uno display:none. Avvia gli id come fileName e ucan quindi accedi a loro tramite getElementById(<yourID>).innerHTML. Esempio di jsp Based Write snippet..or in qualsiasi lingua che si desidera ..

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

fonte

2016-03-04 11:40:31

vi consiglio di dare un'occhiata a questo plugin: https://github.com/rmarscher/virtual-module-webpack-plugin, che consentono di creare un file virtuale al volo, e allora si potrebbe includi questo file nella configurazione della voce.

fonte

2017-02-08 07:11:48

Provate a dare un'occhiata a come vengono forniti i moduli esterni e delegati in Webpack. Un buon punto di partenza è il ExternalModuleFactoryPlugin o DllReferencePlugin.

In sostanza, si crea un plug-in per il NormalModuleFactory che accetta richieste di moduli, si abbinano quelli che dovrebbero risolvere i moduli che si stanno generando e si può rispondere in modo asincrono con uno Module.

fonte

2017-06-08 10:51:24

Webpack crea dinamicamente un modulo

risposta

Problemi correlati