Discussion :

[Ushuango]

Bonjour,
et meilleurs vœux 2022 à toutes et à tous !

En ce qui me concerne, cette année, j'ai décider de comprendre le code que j'écris

Je sui donc en train de me faire plaisir sur mon projet ( exercice ) Symfony.
En ce moment , je m'amuse avec webPack Encore .
Très sympas , mais:

lorsque je tape [c-text]npm run watch[/C], je comprends bien que ça lance un script qui va me construire un fichier app.css et un autre app.js à partir
des fichiers app.css et app.js qui se trouvent dans mon dossier assets. ( corrigez moi si je n'ai pas compris...)
Mais par que ce passe t-il exactement ? et dans quel ordre ? ( derrière la magie de la commande ).

D'ailleurs, j'ai une erreur dans le fichier app.css:
@charset "UTF-8"; at-rule or selector expectedcss(css-ruleorselectorexpected)Je suppose que ce n'est pas la bonne façon d'écrire, mais comme c'est généré automatiquement, je me demande comment corriger !
Mais ça n’empêche pas le bon fonctionnement pour l'instant.

Le but pour moi, est de comprendre ce qu'il se passe derrière et donc de mieux comprendre ce que je fait par la suite.
Sans ça, je n'apprends et ne retiens rien.

J'imagine que les explications sont peut-être un peu au-dessus de mon niveau de débutant, mais tant pis, il faut en passer par là !

Merci d'avance pour vos explications.

P.S: pas sûr que ce soit le bon forum , je pense que ça ne concerne pas spécialement Symfony, mais je ne sais pas où poster.

[grunk]

C'est pas une question PHP mais javascript , mais on vas y répondre puisque c'est lié à symfony.

Première chose , webpack n'est pas spécifique à Symfony , c'est un outil disponible indépendamment, il est juste intégré de manière simple dans Symfony.
Pour faire simple webpack est là pour prendre tous tes fichier js et tes assests (css, image ,etc ...) et en faire un seul gros fichiers unique. Si on veux simplifier à outrance , webpack ouvre chacun de tes fichier js , copie le contenu et le colle dans un seul et unique fichier.

En réalité c'est un peu plus compliqué que ça car webpack va gérer les notions de dépendances entre fichiers, faire du tree shaking, gérer des loader différent, etc ... , mais le resultat final est celui ci.

L'intérêt de la chose c'est de pouvoir découper le code client (js) en module et optimiser les chargements tout en gardant une organisation de code source claire.
Il est moins performant de charger 10 fichiers js de 10Ko qu'un seul de 100ko mais en revanche c'est bien plus pratique de travailler avec 10 fichiers qu'un seul gros tas de code. C'est donc la raison d'être de ce genre d'outil.

Si tu veux en savoir plus il faut se palucher la doc de webpack https://webpack.js.org/