Stucture final  

mon-projet/                         # Racine du projet
├─ src/                             # Fichiers front-end (JS, SCSS)
│   ├─ js/                          # Code JavaScript (logique, modules, Webpack entrypoints)
│   │   └─ script.js                # Exemple de script JS principal
│   └─ scss/                        # Feuilles de style SCSS (préprocesseur CSS)
│       └─ style.scss               # Exemple de style principal
├─ app/                             # Code PHP (autoload PSR-4 via Composer)
│   ├─ Controller/                  # Contrôleurs (logique des pages / routes)
│   ├─ Model/                       # Modèles (données, interaction avec la BDD)
│   ├─ Views/                       # Vues (templates,Twig, rendu HTML/PHP)
│   ├─ Shared/                      # Classes partagées (helpers, services, utilitaires)
│   └─ Autoloader.php               # Autoloader PSR-4 (si tu ne relies pas que sur Composer)
├─ httpdocs/                        # Racine publique (DocumentRoot Apache/Nginx ou php -S)
│   └─ index.php                    # Point d’entrée web (charge Composer + Autoloader + Controller)
├─ vendor/                          # Dépendances PHP installées par Composer (auto-généré)
├─ composer.json                    # Configuration Composer (dépendances + autoload PSR-4)
├─ package.json                    
└─ webpack.config.js                


Création des dossiers: 
mkdir mon-projet && cd mon-projet    # Dossiers frontend
mkdir -p src/js src/scss			# Dossiers backend
mkdir -p app/Controller app/Model app/Views app/Shared   # Racine web
mkdir httpdocs


Côté PHP (backend) : 
composer init
├─ Package name             # Nom du package au format vendor/package (ex: justne/mon-projet)
├─ Description              # Courte description du projet (1 phrase)
├─ Author                   # Nom et email de l’auteur
├─ Minimum Stability        # Niveau de stabilité minimum accepté pour les dépendances
│   ├─ dev                  # Accepte tout (dev, alpha, beta, RC, stable)
│   ├─ alpha                # Accepte alpha, beta, RC, stable
│   ├─ beta                 # Accepte beta, RC, stable
│   ├─ RC                   # Accepte Release Candidate et stable
│   └─ stable               # (par défaut) accepte uniquement les versions stables
├─ Package Type             # Décrit le rôle du projet
│   ├─ library              # Librairie réutilisable (par défaut)
│   ├─ project              # Application finale (site web, CLI, etc.)
│   ├─ metapackage          # Package vide servant uniquement à regrouper des dépendances
│   └─ composer-plugin      # Extension qui ajoute des fonctionnalités à Composer lui-même
├─ License                  # SPDX ID (ou "proprietary") : conditions d’usage/réutilisation
│   ├─ MIT                  # Très permissive, courte, autorise usage commercial + fermé
│   ├─ Apache-2.0           # Permissive + clause de brevets (patent grant)
│   ├─ BSD-3-Clause         # Permissive, similaire à MIT avec clause de non-endorsement
│   ├─ MPL-2.0              # Copyleft *par fichier* (plus souple que GPL)
│   ├─ GPL-3.0-or-later     # Copyleft fort : dérivés doivent rester open-source
│   ├─ LGPL-3.0-or-later    # Copyleft faible pour libs (linking propriétaire autorisé)
│   ├─ AGPL-3.0-or-later    # Copyleft fort étendu aux services réseau (SaaS)
│   ├─ Unlicense / CC0-1.0  # Domaine public (ou quasi) : zéro restriction
│   └─ proprietary          # Code non libre (licence privée, redistribution interdite)
├─ Dependencies             # Dépendances nécessaires (require)
├─ Dev Dependencies         # Dépendances utilisées seulement en développement (require-dev)
└─ PSR-4 Autoload           # Mapping namespace → dossier (ex: "App\\": "app/")



{
    "name": "moi/mon-projet",           // Nom du package (vendor/package)
    "description": "Mon projet PHP avec Composer et Webpack", // Courte description
    "type": "library",                  // Type: library (réutilisable), project (appli finale), etc.
    "license": "MIT",                   // Licence SPDX (MIT = permissive)
    "autoload": {
        "psr-4": {
            "Root\\Cookie\\": "app/"    // Namespace Root\Cookie\ mappé sur le dossier app/
        }
    },
    "authors": [
        {
            "name": "aaa",              // Auteur principal
            "email": "aaa@example.com", // (optionnel mais recommandé)
            "homepage": "https://example.com" // (optionnel) page perso/société
        }
    ],
    "minimum-stability": "stable",      // Niveau minimum de stabilité accepté
    "require": {
        "php": ">=8.1"                  // Dépendances nécessaires (ici: version PHP requise)
    },
    "require-dev": {
        "phpunit/phpunit": "^10.0"      // Dépendances dev uniquement (tests, outils)
    },
    "scripts": {
        "test": "phpunit --configuration phpunit.xml" // Commandes personnalisées
    },
    "config": {
        "optimize-autoloader": true,    // Optimise autoload en prod
        "sort-packages": true           // Trie les dépendances automatiquement
 







Côté Webpack (frontend) : 
npm init -y
npm install --save-dev webpack webpack-cli webpack-dev-server
npm install --save-dev style-loader css-loader sass sass-loader


 

/httpdocs/index.php :
<?php
require __DIR__ . '/../vendor/autoload.php';
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Mon projet PHP + Webpack</title>
</head>
<body>
  <h1>Hello World</h1>
  <script src="/dist/bundle.js"></script>
</body>
</html>

npm init -y
npm install --save-dev webpack webpack-cli webpack-dev-server
npm install --save-dev style-loader css-loader sass sass-loader

Configurer l’autoload PSR-4 dans composer.json :
"autoload": {
  "psr-4": {
    "App\\": "app/"
  }
}


composer dump-autoload



webpack.config.js
const path = require('path');

module.exports = {
  entry: './assets/js/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    clean: true
  },
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: ['style-loader', 'css-loader', 'sass-loader']
      }
    ]
  },
  devServer: {
    static: './httpdocs',
    hot: true,
    port: 3000
  }
};

assets/scss/style.scss
body {
  font-family: system-ui, sans-serif;
  background: #fafafa;
  color: #333;
}

assets/js/index.js
import '../scss/style.scss';
console.log("Hello depuis Webpack 🚀");