Eleventy Webpack

Eleventy Webpack is a barebone open-source boilerplate that combines the Eleventy (11ty) static site generator with a Webpack build pipeline, giving developers a forkable starting point for production-ready static sites.

What is Eleventy Webpack?

Eleventy Webpack is a barebone boilerplate that pairs Eleventy with Webpack, wired together with Babel, PostCSS, Sass, and Prettier. It takes Markdown, Nunjucks, JavaScript, and SCSS sources from src/ and builds a fully static site into the _site folder, ready to deploy to any static host. A live demo is hosted at eleventy-webpack.netlify.app, and the repository includes a Netlify deploy-status badge. Because the project relies on npm scripts and a .nvmrc file, it runs on Node.js.

Key Features

• Barebone 11ty core — The Eleventy setup is intentionally minimal, with all content and assets stored under src/; the README calls it 'literally' barebone and encourages forking.
• Per-environment webpack builds — Webpack, Babel (babel-preset-env), and PostCSS (postcss-preset-env) are configured together so development and production bundles are built separately.
• Modern JavaScript — .js files are processed through Babel with polyfills; npm run analyze prints bundle-size information.
• Sass and PostCSS pipeline — .scss/.css files are compiled with Sass, PostCSS, and Autoprefixer; production output is minified with source maps and headers.
• Responsive image shortcode — Based on @11ty/eleventy-img, the image shortcode generates WebP plus optimized JPEG/PNG in multiple sizes, supports loading="lazy", and can optionally wrap images in <figure> with <figcaption>.
• SVG sprite generation — SVG files placed in src/assets/icons are combined into a single symbol sprite served at /assets/images/sprite.svg and exposed through the icon shortcode.
• SEO and safe links — The template includes SEO metadata and Open Graph tags and automatically adds noopener and noreferrer to external links.
• Shortcodes and filters — A markdown filter parses strings, format/formatISO filters use date-fns for date output, and the markdown shortcode embeds Markdown inside templates.
• Developer experience — Prettier formats all files except _site, while eleventy-plugin-error-overlay shows a build-error overlay during development.

Who is it for?

This template suits developers who want a preconfigured static-site stack without assembling Eleventy, Webpack, Sass, and PostCSS themselves. It is also useful for freelancers and agencies that need consistent output such as responsive images, icon sprites, and SEO meta tags for client sites, and for any team that wants a small, auditable boilerplate they can fork and adjust.

• Eleventy newcomers — Get a working Eleventy + Webpack setup with shortcodes and filters ready to use.
• Freelancers and agencies — Spin up client landing pages and content sites quickly with responsive images, SVG sprites, and SEO/Open Graph tags included.
• Performance-conscious developers — Use Webpack per-environment builds and bundle analysis to keep JavaScript and CSS payloads in check.
• Open-source maintainers — Fork the repository and adapt the minimal configuration for their own projects or new starters.

What can you do with Eleventy Webpack?

• Build a blog or content site: author posts in Markdown and use the format and formatISO date filters plus the markdown shortcode for embedded content.
• Create a landing page: compose pages in .md or .njk, add SVGs to the icon folder, and rely on Open Graph tags for social sharing.
• Assemble a client deliverable: commit a project with npm run start for local development on port 8080 and ship _site after npm run build; the included Netlify badge makes deploy setup straightforward.
• Audit bundle size: run npm run analyze to list what your webpack bundle contains before release.

How does Eleventy Webpack work?

Install dependencies with npm install, then use npm run start to serve the site on localhost:8080 or npm run build to generate the production site in _site. The source tree keeps content and assets under src/, and custom shortcodes such as icon, image, and markdown are available in both .md and .njk files. The included webpack.config.js is simple by design and can be edited freely.

Alternatives

Other Eleventy starter kits named in the README's acknowledgments include hylia, elevenpack, eleventy-high-performance-blog, and eleventy-netlify-boilerplate. These projects served as references for this template and can be used as starting points with different default features.

FAQ

Is Eleventy Webpack free?

Yes, the template is published as an open-source GitHub repository, and the README shows no paid tier or license restrictions. You can fork it and use it for personal or commercial projects; the only required step is running npm install.

Does it support Sass and PostCSS?

Yes. The CSS pipeline compiles .scss/.css files with Sass, runs them through PostCSS with postcss-preset-env, and applies Autoprefixer. Production builds minify the CSS and include source maps.

What commands does it provide?

The README defines four npm scripts: npm run start serves the site on http://localhost:8080, npm run build outputs a production build to _site, npm run format runs Prettier on all files except _site, and npm run analyze prints bundle size information.

What image formats does the image shortcode create?

The image shortcode uses @11ty/eleventy-img to create WebP versions alongside optimized JPEG or PNG images, each in multiple sizes. It also supports remote image caching, lazy loading, and optional figure/caption output when a title is passed.

What file types can I use for pages?

You can author pages in Markdown or Nunjucks. Shortcodes and filters are available in both .md and .njk files, and JavaScript modules are processed through Babel and Webpack.