11ty asset pipeline using JS templates

Eleventy is a very flexible and doesn't provide a defined way to deal with static assets. It's possible to use external pipelines such as Vite and [Webpack], but it's also possible to do this in 11ty. The 11ty docs on adding assets describes 4 ways of adding CSS and JavaScript to a page and here we look using a JavaScript template to provide custom processing for static assets.

Another way to do this in 11ty is to define custom template types to handle CSS, JS and even SCSS. The eleventy-plugin-asset-pipeline plugin does just this.


Links

  • [[2025-W17]]
  • https://mxb.dev/blog/eleventy-asset-pipeline/
  • https://darthmall.net/2020/eleventy-asset-pipeline/
  • https://chriskirknielsen.com/blog/eleventy-asset-pipeline-precompiled-assets/