Comment charger tous les fichiers dans un répertoire en utilisant webpack sans exiger des instructions

J’ai une grande quantité de fichiers JavaScript divisés en 4 sous-répertoires dans mon application. En grognant, je les prends tous et les comstack dans un seul fichier. Ces fichiers n’ont pas de fonction module.exports.

Je veux utiliser Webpack et le diviser en 4 parties. Je ne veux pas entrer manuellement et exiger tous mes fichiers.

J’aimerais créer un plug-in qui, lors de la compilation, parcourt les arborescences de répertoires, puis récupère tous les noms et chemins des fichiers .js, puis requirejs tous les fichiers des sous-répertoires et les ajoute à la sortie.

Je veux que tous les fichiers de chaque répertoire soient compilés dans un module que je pourrais ensuite exiger de mon fichier de point d’entrée, ou inclure dans les ressources mentionnées par http://webpack.github.io/docs/plugins.html .

Lors de l’ajout d’un nouveau fichier, je veux juste le déposer dans le bon répertoire et savoir qu’il sera inclus.

Existe-t-il un moyen de le faire avec Webpack ou un plug-in que quelqu’un a écrit pour le faire?

C’est ce que j’ai fait pour y parvenir:

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

Dans mon fichier d’application, j’ai fini par mettre l’exigence

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

courtoisie de ce post: https://github.com/webpack/webpack/issues/118

Il ajoute maintenant tous mes fichiers. J’ai un chargeur pour HTML et CSS et cela semble fonctionner très bien.

Que diriez-vous d’une carte de tous les fichiers dans un dossier?

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

Faites ceci:

 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, /.*/)); 

cela fonctionne pour moi:

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

REMARQUE: cela peut nécessiter des fichiers .js dans les sous-répertoires de ./js/ de manière récursive.

Exemple de la façon d’obtenir une carte de toutes les images dans le dossier actuel.

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