Utiliser webpack pour gérer les builds des diaporamas

[lucsorel]

Webpack ayant pour objectif d'associer toutes les ressources d'une application web (images, styles, applicatifs JS) pour produire les artefacts des formations (fichiers web statiques, pdf), son utilisation permettrait de répondre aux besoins et d'apporter les bénéfices suivants :

• Mettre à jour la stack technique #141 en s'affranchissant de Grunt et de leurs inconvénients (configuration fastidieuse des tâches, génération et gestion de fichiers temporaires sur disque). La génération des fichiers statiques et le résultat d'un seul build où les différents loaders et plugins font le travail en mémoire et avec un système de cache qui fait gagner du temps
• Un build plus simple ? #117 : similaire au point précédent
• Déplacer la technicité des formations vers le framework #143 : la configuration webpack étant un module Node.js, un projet de formation peut facilement importer la configuration du framework de diaporama et la ré-exporter telle quelle, en ne surchargeant que ce qu'il faut
• utilisation de différents loaders existants pour :
  • intégrer dans le fichier markdown des images (loader markdown-image-loader développé personnellement)
  • intégrer dans le fichier markdown des diagrammes UML via :
  • des fichiers source Mermaid (ça répondrait à l'issue Intégrer Mermaid pour les diagrammes #33) : loader tiers mermaid-loader
  • des fichiers source PlantUML : loader plantuml-file-loader développé personnellement (voir la capture d'écran ci-dessous)

• utilisation de webpack-dev-server pour :
  • assister la création du diaporama (livereload des diapos lors de l'édition du markdown, des images, du css, etc.)
  • intégrer en temps réel les retours de l'audience sur une diapo où on les questionne

Je donne un exemple de configuration webpack + markdown-image-loader + RevealJS3 ici (voir l'articulation des fichiers package.json, RevealJS-webpack-setup.md et la configuration webpack.config.js pour voir la concision de la solution).

Venant d'arriver, j'évalue mal les impacts sur le process d'intégration continue et les besoins de personnalisation de chaque projet de formation dans leur articulation avec le framework : chemins de fichier, variables d'environnement, configuration de l'intégration continue (le loader plantuml-file-loader ayant notamment besoin de docker pour déléguer la génération d'images à un container PlantUML). Les regards croisés de personnes plus aguerries avec le framework permettront sans doute d'encourager ou d'abandonner cette piste. Par exemple, je n'ai pas testé la génération de pdf, mais ça doit être possible de gérer ça via les scripts npm (génération des fichiers statiques, lancement d'un navigateur + serveur headless, impression pdf).

[hgwood]

Voir aussi https://github.com/Zenika/sensei qui utilise Webpack, avec un loader custom pour Reveal.