eleventy-webpack 🎈

A barebone eleventy and webpack template. Fork and go.

Features

• 🔥 Barebone 11ty (literally 😱)
• ⚡ Fast build with per env configs (babel-env, postcss-preset-env, webpack...)
• .js (ES6, Babel, Polyfills)
• .css (Sass, PostCSS, Autoprefixer)
• ✅ Optimized for production (source maps, headers, minified code...)
• 📸 Responsive images and cached remote images (@11ty/eleventy-img)
• 📦 SVG icon sprite generation
• 🤖 SEO metadata and Open Graph tags
• 📝 Useful shortcodes and filters (date, markdown, sprite icons, responsive images...)
• Neat error overlay (eleventy-plugin-error-overlay)
• 🎨 Prettier for formatting

Live demo https://eleventy-webpack.netlify.app

Usage

First install the dependencies:

npm install

Then you can:

Command	Description
npm run start	Run your website on http://localhost:8080
npm run build	Build your production website inside /_site
npm run format	Run prettier on all filles except /_site
npm run analyze	Output info on your bundle size

Webpack

A very simple webpack.config.js is included. Feel free to change it.

Shortcodes

All shortcodes can be used inside .md or .njk files.

icon

Any SVG added to src/assets/icons is bundled into a symbol sprite file and made available through this shortcode.

<!-- Assuming `src/assets/icons/github.svg` exist -->
<p>{% icon "github" %} Github icon</p>
<!-- Will be rendered as -->
<svg class="icon icon--github" role="img" aria-hidden="true">
  <use xlink:href="/assets/images/sprite.svg#github"></use>
</svg>

---

image

Creates a WebP version of the image (assuming it is not already) and the corresponding JPEG / PNG. Both will be created with sensible sizes (assuming the image is big enough).

<!-- Assuming `src/assets/images/mountains.jpeg` of width 338px exist -->
{% image "mountains.jpeg", "Picture of someone on top of a mountain" %}
<!-- Will be rendered as -->
<picture>
  <source type="image/png" srcset="/assets/images/678868de-320.png 320w, /assets/images/678868de.png 338w" sizes="90vw, (min-width: 1280px) 1152px">
  <source type="image/webp" srcset="/assets/images/678868de-320.webp 320w, /assets/images/678868de.webp 338w" sizes="90vw, (min-width: 1280px) 1152px">
  <img loading="lazy" src="/assets/images/678868de-320.png" alt="Picture of someone on top of a mountain" width="320" height="580">
</picture>

---

markdown

Embed markdown easily.

{% markdown %}
Let's you use **Markdown** like _this_.
Or with includes {%- include 'content.md' -%}.
{% endmarkdown %}

---

Filters

All filters can be used inside .md or .njk files.

log

Output the passed object to the console:

<!-- Assuming page.date is a javascript date -->
{{ page.date | log }}
<!-- Will be rendered as -->
2020-11-05T11:44:29.834Z

---

formatDate

Format the passed date with date-fns:

<!-- Assuming page.date is a javascript date -->
{{ page.date | formatDate("yyyy") }}
<!-- Will be rendered as -->
2020

---

Thanks

• https://github.com/gregives/twelvety
• https://github.com/hankchizljaw/hylia
• https://github.com/MadeByMike/supermaya
• https://github.com/jeromecoupe/webstoemp
• https://github.com/maxboeck/eleventastic
• https://github.com/deviousdodo/elevenpack
• https://github.com/ixartz/Eleventy-Starter-Boilerplate
• https://github.com/google/eleventy-high-performance-blog
• https://github.com/danurbanowicz/eleventy-netlify-boilerplate