2016-06-13 9 views
8

Sto ancora imparando il webpack e stavo avendo problemi a far visualizzare le immagini nella mia build di produzione finché non sono incappato in un codice che aveva uno require('path/to/image.png') nella parte superiore di un file .js. Così ho provato, ed ecco che funziona.(Webpack) Usando l'url-loader o il caricatore di file, devo davvero includere un require() nel mio .js per ogni immagine statica che voglio includere?

Questo mi sembra perplesso. Devo davvero includere uno di questi per ogni immagine statica che devo servire? C'è un modo migliore per farlo? Questo sarà disordinato se non.

risposta

5

Esistono caricatori come css-loader e url-loader che risolvono gli url per basare le stringhe di dati inline64 invece di servire la risorsa statica.

È possibile vedere this great guide come implementare con url-loader. Se hai problemi, devi assicurarti di utilizzare il percorso relativo corretto.

'./path/to/image.png'

+0

io sono a conoscenza di questi caricatori di cui parli e sto già utilizzando sia. A volte però non ha senso codificare in base64 le immagini, e in ogni caso credo che sia ancora necessario 'require ('path/to/image.png')' che è quello che sto veramente chiedendo. C'è un modo per includere le mie immagini semplicemente facendo riferimento ad esse nell'html, piuttosto che doverle richiedere nel mio js? – Anj

+0

Se si imposta la query 'limite' per' url-loader', verranno visualizzate solo le immagini online della dimensione specificata dell'asset. Se è più grande allora il caricatore di file emetterà automaticamente quel file con i pacchetti per te. –

+0

Sì, lo so anche io, ma questo in realtà non risponde alla mia domanda. Voglio sapere se c'è un modo per aggirare la necessità di fare un 'require ('path/to/image.png')' nel mio file javascript. Non so come potrei essere più chiaro che questo è quello che sto chiedendo. – Anj

4

È possibile utilizzare la CopyWebpackPlugin per spostare src file in una cartella di attività quando la costruzione del progetto webpack.

dettagli in questa risposta: https://stackoverflow.com/a/33374807/492976

+0

Se si utilizza questo plugin, come si aggiunge un codice hash alle risorse? Se non si hanno problemi con il browser non si aggiorna la cache sui deploys. – Gherman