opsone
Contactez-nous contactcontact

  • 17 mars 2021
  • Tech

Technologies Open Source chez Opsone : Webpack

Travailler avec des technologies open source apporte de nombreux avantages. Au delà de l’aspect financier, le code source n’étant pas propriétaire il est accessible et amélioré par une communauté mondiale très active. Nouvel article de la série sur les solutions Open source avec le témoignage de Katia Moraira, Développeuse Front-End et Intégratrice web, sur la technologie Webpack.

Webpack est aujourd’hui un outil indispensable lorsque l’on fait du développement front-end et que l’on souhaite modulariser notre code, c’est-à-dire séparer notre code javascript ou notre code CSS en plusieurs fichiers.

Webpack a succédé à des outils comme gulp ou grunt qui sont appelés des task runners ou automatiseur de tâches. Ils permettent d’exécuter un certain nombre de tâches chronophages et répétitives de manière automatique (comme compiler du SASS par exemple). Si Webpack intègre bien ces processus dans ses mécaniques, sa philosophie va plus loin car il vous aide à organiser votre code en modules indépendants, unique et portant sur un usage spécifique en les groupants (c’est ce qu’on appelle un module bundler).
Webpack est particulièrement utilisé conjointement avec des frameworks comme React, VueJS ou Angular qui reposent sur cette notion de composant autonome, cohérent et complet.

.

Webpack permet entre autres de :

  • Utiliser les derniers standards JavaScript sur tous les navigateurs en convertissant du code écrit dans une version ECMAScript 2015+ en une version plus ancienne à l’aide de l’outil Babel
  • Utiliser un préprocesseur CSS et par exemple compiler du SCSS en CSS
  • Installer un serveur de développement avec rechargement automatique des pages (Hot Module Reload)
  • Minifier les fichiers Javascript et CSS
  • Mettre en place des environnements de production et de développement

 

Chez Opsone nous utilisons webpack sur l’ensemble de nos projets, qu’ils utilisent un framework front-end ou non. Cela nous permet de garder une cohérence dans la configuration de nos projets en front-end.

Sur nos projets Rails, nous utilisons l’outil webpacker qui facilite l’utilisation et la configuration de webpack. Inspiré de webpacker, webpack encore, proposé par Symfony nous permet quant à lui de simplifier la configuration de webpack sur nos projets PHP. Nous l’utilisons ainsi sur nos projets Symfony évidemment mais aussi sur nos projets développés sur WordPress et Drupal.

Avantages en résumé : séparation logique du code, structuration, maintenabilité et lisibilité du code.

Nos projets utilisant cette technologie :

Avea Vacances

Cabinet MBG

Handsomm

Les derniers articles

Technologies Open Source chez Opsone : REACT JS / REACT NATIVE


30 mars 2021

Mon application métier est moche !


22 mars 2021