User Tools

Site Tools


backend:symfonywebpack

Symfony : Webpack

logo

Webpack Encore

Présentation

Webpack Encore est le moyen simple utilisé par Symfony pour intégrer Webpack dans une application.
Il enveloppe Webpack, pour offrir une API propre et puissante pour regrouper les modules JavaScript, prétraiter CSS et JS et compiler et réduire les actifs. Il génere le fichier de configuration de Webpack au travers du fichier webpack.config.js.

Webpack est un module bundler, principalement utilisée en front-end, pour rassembler les fichiers Javascript, les images, les fichiers CSS du code source en un unique fichier.
Webpack va alors optimiser le poids du code source et améliorer perforances des application.

Installation de Webpack Encore

Pour l'installer, il faut utiliser :

composer require symfony/webpack-encore-bundle

Prérequis

Installations

Pour pourvoir utiliser Webpack Encore, il faut installer :

  • Un manager de paquets (package manager) tel que :
    • npm (Node package manager) qui est installé directement avec Nodejs.

Installation des dépendances

Un fichier package.json est créé, il correspond au fichier composer.json dans le monde de JS.
Il faut alors utiliser un manager de paquets pour installer les dépendances indiquées dans ce fichier :

npm install

ou

yarn

Le répertoir node_modules est créé. Il contient toutes les dépendances.
Le fichier package-lock.json est égalmement créé, il correspond au fichier composer.lock dans le monde de JS.

Configuration : webpack.config.js

Ce fichier permet de générer le fichier de configuration de Webpack. Lorsqu'on le modifie, il faut relancer un script de compilation.

Chemin

Encore
    // répertoire dans lequel les assets compilés seront stockés
    .setOutputPath('public/build/')
    // chemin public utilisé pour y accéder
    .setPublicPath('/build')

Entrées

/*
  * ENTRY CONFIG
  *
  * Add 1 entry for each "page" of your app
  * (including one that's included on every page - e.g. "app")
  *
  * Each entry will result in one JavaScript file (e.g. app.js)
  * and one CSS file (e.g. app.css) if your JavaScript imports CSS.
  */
.addEntry('app', './assets/js/app.js')

SASS

Pour pouvoir utiliser SASS, il faut décocher la ligne :

// enables Sass/SCSS support
.enableSassLoader()

Lorsqu'on relance un script de compilation, on a cette erreur :

npm run watch
 
> @ watch d:\Developpement\En_cours\panterest
> encore dev --watch
 
Running webpack ...
 
  Error: Install sass-loader & node-sass (or sass) to use enab  leSassLoader()
    npm install sass-loader@^8.0.0 node-sass --save-dev
 
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ watch: `encore dev --watch`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ watch script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
 
npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Sebastien\AppData\Roaming\npm-cache\_logs\2020-08-06T15_47_38_695Z-debug.log

Il faut alors installer sass-loader et node-sass :

npm install sass-loader@^8.0.0 node-sass --save-dev

On peut alors écrire du SASS dans le fichier css, mais il faut changer son extension en SCSS ou SASS et son extension dans le fichier assets\js\app.js :

// any CSS you import will output into a single css file (app.css in this case)
import '../css/app.scss';

On peut aussi changer le nom du repertoire : assets\scss\app.scss :

// any CSS you import will output into a single css file (app.css in this case)
import '../scss/app.scss';

Bootstrap

Bootstrap CSS

Il faut installer Bootstrap CSS :

npm install bootstrap --save-dev

On a un message qui indique qu'il faudra installer des dépendances manuellement :

npm WARN bootstrap@4.5.1 requires a peer of jquery@1.9.1 - 3 but none is installed. You must install peer dependencies yourself.
npm WARN bootstrap@4.5.1 requires a peer of popper.js@^1.16.1 but none is installed. You must install peer dependencies yourself.

Ce sont les mêmes que dans les lignes de scripts qu'on ajoute au fichier HTML/Twig pour ajouter Bootstrap manuellement :

<!-- Les voilà : -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
  integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
  integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
</script>
 
<!-- Bootstrap a bien été déjà installé, lui -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
  integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"> 
</script>

Il faut importer Bootstrap dans le fichier assets\scss\app.scss :

@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
 
@import 'shared/_variables.scss';
 
@import "~bootstrap/scss/bootstrap";
 
body {
  font-family: $primary_font, sans-serif;
}
 
.alert {
  margin: 0;
  text-align: center;
  border: 0;
  border-radius: 0;
  margin: 0;
}
Bootstrap JS

Il faut installer Bootstrap JS :

npm install jquery popper.js --save-dev

Il faut importer jQuery et Boostrap dans le fichier assets\js\app.js :

// Need jQuery? Install it with "yarn add jquery", then uncomment to import it.
import $ from 'jquery';
import 'bootstrap';

Compilation

Il existe 4 scripts permettant de compiler les fichiers présent dans les répertoires assets\css et assets\js :

"scripts": {
    "dev-server": "encore dev-server",
    "dev": "encore dev",
    "watch": "encore dev --watch",
    "build": "encore production --progress"

Pour les lancer, il faut faire :

# pour le script 'watch'
npm run watch

ou

# pour le script 'watch'
yarn watch

Lorsqu'on lance un de ces scripts, le répertoire public\build est vidé et les fichiers nécessaires sont créés à l'intérieurs.

watch compile automatiquement au fur et à mesure des modifications des fichiers CSS et JS.
build compile des fichiers minifiés pour utiliser en production

encore_entry_link_tags() et encore_entry_script_tags()

Ce sont des fonctions utilisables dans les fichiers Twig dans les blocs correspondants :

{% block stylesheets %}
  {{ encore_entry_link_tags('app') }}
{% endblock %}
...
{% block javascripts %}
    {{ encore_entry_script_tags('app') }}
{% endblock %}

Avec app correspondant à l'entrée défini dans le fichier public\build\entrypoints.json

{
  "entrypoints": {
    "app": {
      "js": [
        "/build/runtime.js",
        "/build/app.js"
      ],
      "css": [
        "/build/app.css"
      ]
    }
  }
}

Les fichiers définis à l'intérieur seront automatiquement ajoutés.

Gérer les images

On peut mettre des images dans le répertoire assets\images et dans le fichier webpack.config.js ajouter :

.copyFiles({
  from: 'assets/images',
  to: '[path][name].[hash:8].[ext]',
  context: './assets'
})

En précisant context: './assets', le chemin sera dans le dossier de sortie public\build Les images seront alors copiées dans le répertoire public\build\images\

backend/symfonywebpack.txt · Last modified: 2020/09/16 10:35 (external edit)