Observer les changements de fichiers arbitraires avec Webpack

Description

Si vous utilisez Webpack, vous êtes probablement déjà habitués à son serveur de dev et au Hot Module Replacement permettant de mettre à jour le CSS et/ou JavaScript interprété dans votre navigateur, à chaque changement dans votre code source.
Le bénéfice principal étant que cela ne nécessite aucun rafraîchissement de votre page. Cela permet de conserver l'état de votre application et constater les changements en temps réel sans avoir à reproduire les actions effectuées.

Le parent pauvre de ce fonctionnel existe également sous le terme de « Live Reload » et permet uniquement d'automatiser le rechargement de la page lorsque vous modifiez un fichier.
Ce mécanisme est moins optimal, car ne conserve pas l'état courant de l'application, mais permet tout de même de gagner du temps lors de vos développements selon les situations.

Le live reload ne s'applique par défaut qu'aux fichiers JavaScript et CSS, mais il est possible depuis Webpack DevServer 4 de l'étendre de façon arbitraire à n'importe quel(s) fichier(s) de votre application au travers de l'option devServer.watchFiles.

Avec Webpack

Par exemple, vous pourriez vouloir recharger automatiquement la page dans votre navigateur lorsque vous modifiez un fichier Twig ou de l'un des contenus rendus dans votre application Symfony :

// webpack.config.js
module.exports = {
  // …
  devServer: {
    liveReload: true,
    // Watch Twig, YAML and Markdown files to force reload the browser on changes:
    watchFiles: [
      'templates/**/*.twig',
      'content/**/*.{yaml,md}',
    ],
  },
};

Ainsi, lorsque vous lancerez votre serveur de dev avec npx webpack serve, votre navigateur rechargera automatiquement la page dès lors que vous modifierez un fichier correspondant à l'un des patterns définis.

Avec Webpack Encore

Si vous développez une application Symfony, il y a toutes les chances que vous utilisiez Webpack Encore.

Auquel cas, la configuration est similaire :

// webpack.config.js
const Encore = require('@symfony/webpack-encore');

Encore
  // …
  .configureDevServerOptions(options => {
    // Watch Twig, YAML and Markdown files to force reload the browser on changes:
    options.liveReload = true;
    options.watchFiles = [
      'templates/**/*.twig',
      'content/**/*.{yaml,md}',
    ];

    // Disable watching the static `public` folder since it would force a live reload on any change,
    // as the manifest.json file is always re-computed (but not required by the dev server):
    options.static.watch = false;
  })

Avec une version antérieure à Webpack 5 / Webpack DevServer 4

Si vous utilisez une version antérieure à Webpack 5 / Webpack DevServer 4, vous pouvez toujours utiliser chokidar et un middleware pour simuler le comportement de devServer.watchFiles :

// webpack.config.js
const Encore = require('@symfony/webpack-encore');
const path = require('path');
const chokidar = require('chokidar');

Encore
  // …
  .configureDevServerOptions(options => {
    // Watch Twig, YAML and Markdown files to force reload the browser on changes:
    options.onBeforeSetupMiddleware = (devServer) => {
      const files = [
        path.resolve(__dirname, 'templates/**/*.html.twig'),
        path.resolve(__dirname, 'content/**/*.{yaml,md}'),
      ];

      chokidar.watch(files).on('all', () => {
        devServer.sockWrite(devServer.sockets, 'content-changed');
      });
    }
  })

Conclusion

Cette astuce est particulièrement utile lorsque vous développez des contenus statiques ou travaillez sur la structure de vos pages HTML. Les applications de type "pages de contenus", telles que celles utilisant Stenope, font généralement de bonnes candidates.
C'est d'ailleurs le cas du site sur lequel vous vous trouvez actuellement, généré avec Stenope à partir de fichiers Twig, Yaml et Markdown (comme en atteste son code source).

Sources

Crédits: photo de couverture par Olena Bohovyk