Utilizzo require ('...') con una variabile e utilizzando una stringa nel pacchetto web

Question

Ho un problema che per me non ha molto senso.

Sto mappando una matrice di oggetti che hanno una proprietà "nome" e una "href".

let appleIcons = _.map(appleIcons, appleIcon => { 
    appleIcon.href = require(appleIcon.href); 
    return appleIcon; 
}); 

All'interno del ciclo voglio richiedere l'immagine ma genera un errore "* $:. 11 Uncaught errore: Impossibile trovare il modulo".

Quando stampo il valore di appleIcon.href e provo a inserirlo direttamente nel require ('') funziona.

appleIcons = _.map(appleIcons, appleIcon => { 
    appleIcon.href = require('./../../mobile-config/apple-icon-57x57.png'); 
    return appleIcon; 
}); 

Quindi mi puoi spiegare perché il secondo esempio funziona e il primo genera un errore? Come inserisco una variabile all'interno di require ('')?

Grazie!

Answer 1

Poiché Webpack è in esecuzione in fase di build, non è possibile determinare quali moduli raggruppare quando il nome è una variabile dinamica. Puoi dargli dei suggerimenti specificando parte del percorso (ad esempio, se sai che tutti i moduli si trovano in una singola directory).

Questa risposta può aiutare: https://stackoverflow.com/a/33048000

(Controllare anche require.context da Webpack Un altro esempio è test karma, here..)

alternativa - se si conoscono i nomi dei file in avanzata, è meglio aggiungere un altro costruisci un passo per emettere loro delle stringhe al file, in questo modo Webpack può raggrupparle.