Backend PHP + frontend Node.js (bundler JS/CSS).

Présentation

Projet combinant PHP pour le backend, Webpack et Node.js pour le frontend et le bundling des fichiers JS/CSS.

Structure finale :

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 de l'arborescence :

mkdir mon-projet && cd mon-projet            # Racine du projet
mkdir -p src/js src/scss                     # Dossiers frontend
mkdir -p app/Controller app/Model app/Views app/Shared   # Dossiers backend
mkdir httpdocs                               # Racine web

Configuration 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",
    "description": "Mon projet PHP avec Composer et Webpack",
    "type": "library",
    "license": "MIT",
    "autoload": {
        "psr-4": {
            "Root\\Cookie\\": "app/"
        }
    },
    "authors": [
        {
            "name": "aaa",
            "email": "aaa@example.com",
            "homepage": "https://example.com"
        }
    ],
    "minimum-stability": "stable",
    "require": {
        "php": ">=8.1"
    },
    "require-dev": {
        "phpunit/phpunit": "^10.0"
    },
    "scripts": {
        "test": "phpunit --configuration phpunit.xml"
    },
    "config": {
        "optimize-autoloader": true,
        "sort-packages": true
    }
}

Configuration 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

Côté PHP (backend)

/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>

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

Configuration de 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 🚀");