{"id":25149593,"url":"https://github.com/lucsorel/diaporamas-webpack","last_synced_at":"2026-05-10T06:50:50.484Z","repository":{"id":68587331,"uuid":"110447512","full_name":"lucsorel/diaporamas-webpack","owner":"lucsorel","description":"Diaporamas interactifs \u0026 illustrés, écrire ses loaders webpack, avec des containers dedans !","archived":false,"fork":false,"pushed_at":"2017-11-12T22:12:28.000Z","size":1363,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-08T21:34:36.352Z","etag":null,"topics":["docker","remarkjs","slideshow","webpack","webpack-dev-server","webpack-loader"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lucsorel.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-11-12T16:13:11.000Z","updated_at":"2022-10-02T14:11:32.000Z","dependencies_parsed_at":"2023-02-26T11:16:20.424Z","dependency_job_id":null,"html_url":"https://github.com/lucsorel/diaporamas-webpack","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lucsorel%2Fdiaporamas-webpack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lucsorel%2Fdiaporamas-webpack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lucsorel%2Fdiaporamas-webpack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lucsorel%2Fdiaporamas-webpack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lucsorel","download_url":"https://codeload.github.com/lucsorel/diaporamas-webpack/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246961927,"owners_count":20861182,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["docker","remarkjs","slideshow","webpack","webpack-dev-server","webpack-loader"],"created_at":"2025-02-08T21:29:29.642Z","updated_at":"2026-05-10T06:50:45.434Z","avatar_url":"https://github.com/lucsorel.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# Diaporamas webpack\n\n\u003e Interactifs \u0026 illustrés, écrire ses loaders, avec des containers dedans !\n\nLes objectifs de ce contenu sont de présenter :\n\n* `webpack` \u0026 `webpack-dev-server` dans le contexte de la construction ou projection de **diaporamas web** basés sur du contenu **markdown** (avec [Remark.js](http://remarkjs.com/), mais transposables à [Reveal.js](http://lab.hakim.se/reveal-js/), voir [ces configurations](https://github.com/lucsorel/markdown-image-loader#web-based-slideshows))\n* deux loaders réalisés pour inclure des médias dans de tels diaporamas :\n  * [markdown-image-loader](https://github.com/lucsorel/markdown-image-loader) : pour inclure des images\n  * [plantuml-file-loader](https://github.com/lucsorel/plantuml-file-loader) : pour inclure comme des images des fichiers source [PlantUML](http://plantuml.com/), la conversion étant déléguée à un container Docker lancé par le loader\n\n# Organisation\n\nCe contenu est composé :\n\n* d'un diaporama principal ([présentation](présentation/src/présentation.md))\n* de plusieurs ateliers (dans [ateliers](ateliers)) permettant d'illustrer ou de mettre en pratique (selon que les travaux soient réalisés par le présentateur⋅ice ou l'audience) les différents points abordés\n\nLe diaporama principal et les ateliers sont des diaporamas web faits avec webpack/dev-server et Remark.js afin de mettre en pratique le contenu exposé. Oui, c'est une inception ou une mise en abyme ツ. La présentation principale sera servie sur [localhost:9090](http://localhost:9090) et les ateliers sur [localhost:8081](http://localhost:8081), [localhost:8082](http://localhost:8082), etc.\n\n## Prérequis\n\n* **Node.js** 6.11+ : les loaders `markdown-image-loader` \u0026 `plantuml-file-loader` sont utilisés par le diaporama principal et ceux de certains ateliers. Ils ont été développés en ES6 et requièrent donc une version 6.11+ de Node.js pour que les diaporamas puissent être lancés.\n\n* les dépendances Node.js requises par la présentation et les ateliers doivent être installées :\n  * avec la commande `npm run install:all`\n  * ou `yarn install:all` (si vous avez installé [yarn](https://yarnpkg.com/))\n\n\n* le service **Docker** doit être lancé et la commande `docker` exécutable sans `sudo` : en effet, le loader `plantuml-file-loader` délègue la conversion des fichiers sources PlantUML à un container sans être super-utilisateur (voir la [configuration de post-installation](https://docs.docker.com/engine/installation/linux/linux-postinstall/) pour ajouter votre utilisateur au groupe `docker`)\n\n## Les ateliers\n\nIls illustrent ou mettent en pratique les points suivants :\n\n* [01-webpack-remarkjs](ateliers/01-webpack-remarkjs) :\n  * présentation de la configuration webpack pour lancer un diaporama avec webpack/dev-server\n  * utilisation du `raw-loader` pour externaliser un contenu markdown et l'inclure dans l'application web lançant le diaporama\n\n\n* [02-chunks](ateliers/02-chunks) : utilisation de plugins pour séparer les artefacts js produits par webpack : le cœur webpack, les bibliothèques tierces, l'application du diaporama\n\n* [03-pimp-my-slideshow](ateliers/03-pimp-my-slideshow) utilisation :\n  * du `css-loader` et du `extract-text-webpack-plugin` pour intégrer CSS et police de caractères\n  * de `markdown-image-loader` \u0026 `file-loader` pour intégrer des images au diaporama\n\n\n* [04-uml-diagrams](ateliers/04-uml-diagrams) utilisation du `plantuml-file-loader` pour inclure un diagramme UML expliquant le process du loader dans le diaporama\n\n# Versions\n\n* 1.0.**1** : modifications pour rendre publique cette présentation (compléments, ajustements, mode d'emploi)\n* **1.0.0** : version présentée lors du bootcamp Zenika le 8/11/2017\n\nVous êtes invité⋅e à proposer des améliorations ou des corrections via des `pull request`s.\n\n# Licence\n\nCette présentation et les ateliers sont publiés sous [licence MIT](LICENCE). Ces contenus ont été inspirés en partie par les travaux de :\n\n* [Sébastien Castiel](https://github.com/scastiel) pour la combinaison webpack/dev-server + Remark.js\n* [Michael \"Z\" Goddard](https://bocoup.com/blog/webpack-a-simple-loader) pour l'extraction d'image dans un document markdown\n* [Yury Korolev](https://github.com/yury/plantuml-loader) pour déléguer la conversion d'un fichier PlantUML à un container\n\nCopyright (c) 2017 Luc Sorel-Giffo\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flucsorel%2Fdiaporamas-webpack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flucsorel%2Fdiaporamas-webpack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flucsorel%2Fdiaporamas-webpack/lists"}