wefix-assets-webpack

Bibliothèque utilitaire pour générer automatiquement des mappings d'assets compatibles Webpack à partir de l'arborescence de fichiers.

Scannez récursivement n'importe quel répertoire et obtenez un objet clé-valeur optimisé pour les points d'entrée Webpack. Performances maximales grâce aux générateurs JavaScript et à l'évaluation paresseuse.

✨ Caractéristiques

• 🚀 Évaluation paresseuse - Utilise les générateurs JavaScript pour une efficacité mémoire optimale
• 📦 Support dual module - Compatible ESM et CommonJS
• ⚡ Haute performance - Traitement à la demande sans chargement complet en mémoire
• 🎯 Intégration Webpack - Format de sortie optimisé pour les configurations Webpack
• 🔄 Récursif - Parcourt automatiquement toute l'arborescence de répertoires
• 🎨 Multi-formats - Supporte tous types de fichiers (TS, JS, SCSS, images, etc.)

📦 Installation

npm install wefix-assets-webpack

yarn add wefix-assets-webpack

pnpm add wefix-assets-webpack

🚀 Utilisation Rapide

ESM (Recommandé)

import { getAllFiles } from 'wefix-assets-webpack';

const assets = getAllFiles('/src/assets');
console.log(assets);
// {
//   "logo": "/absolute/path/to/src/assets/logo.svg",
//   "icon": "/absolute/path/to/src/assets/icon.png",
//   "header": "/absolute/path/to/src/assets/images/header.jpg"
// }

CommonJS

const { getAllFiles } = require('wefix-assets-webpack');

const assets = getAllFiles('/public/images');

📖 Documentation API

getAllFiles(relativePath)

Scanne récursivement un répertoire et génère un objet de mapping compatible Webpack.

Paramètres

| Paramètre | Type | Description | |----------------|----------|-------------------------------------------| | relativePath | string | Chemin relatif depuis la racine du projet |

Retourne

Object - Un objet où :

• Clé : Nom du fichier sans extension
• Valeur : Chemin absolu vers le fichier

Exemple

const files = getAllFiles('/src/components');

// Résultat :
{
  "Button" - "/Users/project/src/components/Button.tsx",
  "Header" - "/Users/project/src/components/Header.tsx",
  "Footer" - "/Users/project/src/components/layout/Footer.tsx"
}

🔧 Intégration Webpack

Configuration de base

// webpack.config.js
import { getAllFiles } from 'wefix-assets-webpack';

const entries = getAllFiles('/src/typescript');

export default {
  entry: entries,
  output: {
    path: __dirname + '/dist',
    filename: '[name].js'
  },
  // ... autres configurations
};

TypeScript avec Webpack

// webpack.config.js
import { getAllFiles } from 'wefix-assets-webpack';

const typescriptFiles = getAllFiles('/src/ts');

export default {
  entry: typescriptFiles,
  output: {
    path: __dirname + '/dist',
    filename: '[name].bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: ['.ts', '.js']
  }
};

SCSS avec Webpack

// webpack.config.js
import { getAllFiles } from 'wefix-assets-webpack';

const styleFiles = getAllFiles('/src/styles');

export default {
  entry: styleFiles,
  output: {
    path: __dirname + '/dist/css',
    filename: '[name].css'
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  }
};

Configuration multi-entrées

// webpack.config.js
import { getAllFiles } from 'wefix-assets-webpack';

const jsFiles = getAllFiles('/src/js');
const cssFiles = getAllFiles('/src/css');

export default {
  entry: {
    ...jsFiles,
    ...cssFiles
  },
  output: {
    path: __dirname + '/dist',
    filename: '[name].[contenthash].js'
  }
};

⚡ Performance et Architecture

Évaluation Paresseuse

La bibliothèque utilise les générateurs JavaScript (function*) et Symbol.iterator pour une évaluation paresseuse :

// Les fichiers ne sont pas tous chargés en mémoire
// Ils sont traités un par un lors de l'itération
const files = getAllFiles('/large-directory'); // ✅ Efficace

Avantages :

• ✅ Consommation mémoire minimale
• ✅ Démarrage instantané même sur de gros répertoires
• ✅ Traitement on-demand
• ✅ Idéal pour les grandes arborescences

Architecture Interne

getAllFiles(path)
    ↓
Résolution du chemin absolu (app-root-path)
    ↓
getAllFilesSync() → Générateur d'itérateur
    ↓
Parcours récursif lazy (yield*)
    ↓
Mapping (nom sans extension → chemin absolu)
    ↓
Objet final compatible Webpack

🛠️ Développement

Prérequis

• Node.js ≥ 14.x
• npm, yarn ou pnpm

Commandes disponibles

# Mode développement avec rechargement automatique
npm run watch

# Build de production
npm run build

# Exécuter les tests
npm run test

Build

Le projet utilise Parcel comme bundler :

• Sortie ESM : dist/index.js
• Sortie CommonJS : dist/index.cjs
• Cache : .parcel-cache/ (gitignored)

Qualité du code

Linting et formatting avec Biome :

• Configuration : biome.json (extends ultracite)
• Style : Indentation tabs, 100 caractères max
• TypeScript : Strict null checks activés

📁 Structure du Projet

wefix-assets-webpack/
├── src/
│   ├── index.js                    # Point d'entrée principal
│   └── components/
│       ├── getAllFilesSync.js      # Scanner avec générateurs
│       ├── normalize/              # Normalisation des options
│       └── utils/                  # Utilitaires de noms de fichiers
├── dist/                           # Build (généré)
├── test/                           # Fichiers de test
├── package.json
├── biome.json                      # Configuration Biome
└── tsconfig.json                   # Configuration TypeScript

🤝 Contribution

Les contributions sont les bienvenues ! N'hésitez pas à :

1. Fork le projet
2. Créer une branche pour votre fonctionnalité (git checkout -b feature/amazing-feature)
3. Commit vos changements (git commit -m 'feat: add amazing feature')
4. Push vers la branche (git push origin feature/amazing-feature)
5. Ouvrir une Pull Request

📄 Licence

Ce projet est sous licence MIT - voir le fichier LICENSE pour plus de détails.

Copyright © 2026 Cuzeac Florin

👤 Auteur

Cuzeac Florin

🔗 Liens Utiles

• npm package
• Documentation Webpack
• Générateurs JavaScript

📝 Changelog

2.0.0

• ✨ Migration vers ESM
• ⚡ Optimisation avec générateurs lazy
• 📦 Support dual module ESM/CommonJS
• 🔧 Build avec Parcel
• 🎨 Linting avec Biome

Mots-clés : webpack, fs, recursive, readdir, path, directory, files, lazy, iterator, iterable, generator, build-tool