Come caricare tutti i file in una directory usando il webpack senza richiedere istruzioni

Ho una grande quantità di file javascript suddivisi in 4 sottodirectory nella mia app. In grugnito li afferro tutti e li compilo in un unico file. Questi file non hanno una funzione module.exports.

Voglio usare il webpack e dividerlo in 4 parti. Non voglio entrare manualmente e richiedere tutti i miei file.

Mi piacerebbe creare un plugin che sulla compilazione cammini gli alberi delle directory, poi afferra tutti i nomi e i percorsi dei file .js, quindi richiede tutti i file nelle sottodirectory e lo aggiunge all’output.

Voglio che tutti i file in ogni directory siano compilati in un modulo che potrei richiedere dal mio file del punto di ingresso, o includere nelle risorse che menziona http://webpack.github.io/docs/plugins.html .

Quando aggiungo un nuovo file, voglio solo farlo cadere nella directory corretta e sapere che sarà incluso.

C’è un modo per farlo con webpack o un plugin che qualcuno ha scritto per fare questo?

Questo è quello che ho fatto per ottenere questo:

function requireAll(r) { r.keys().forEach(r); } requireAll(require.context('./modules/', true, /\.js$/)); 

Nel mio file di app ho finito per mettere il bisogno

 require.context( "./common", // context folder true, // include subdirectories /.*/ // RegExp )("./" + expr + "") 

per gentile concessione di questo post: https://github.com/webpack/webpack/issues/118

Ora sta aggiungendo tutti i miei file. Ho un caricatore per html e css e sembra funzionare alla grande.

Che ne dici di una mappa di tutti i file in una cartella?

 // { // './image1.png': 'data:image/png;base64,iVBORw0KGgoAAAANS', // './image2.png': 'data:image/png;base64,iVBP7aCASUUASf892', // } 

Fai questo:

 const allFiles = (ctx => { let keys = ctx.keys(); let values = keys.map(ctx); return keys.reduce((o, k, i) => { o[k] = values[i]; return o; }, {}); })(require.context('./path/to/folder', true, /.*/)); 

questo funziona per me:

 function requireAll(r) { r.keys().forEach(r); } requireAll(require.context('./js/', true, /\.js$/)); 

NOTA: questo può richiedere i file .js in sottodirectory di ./js / in modo ricorsivo.

Esempio di come ottenere una mappa di tutte le immagini nella cartella corrente.

 const IMAGES_REGEX = /\.(png|gif|ico|jpg|jpeg)$/; function mapFiles(context) { const keys = context.keys(); const values = keys.map(context); return keys.reduce((accumulator, key, index) => ({ ...accumulator, [key]: values[index], }), {}); } const allImages = mapFiles(require.context('./', true, IMAGES_REGEX));