Eleventy Webpack

Overview:

The eleventy-webpack template is a barebone Eleventy and webpack template that allows for fast and efficient build processes. It includes various features such as support for ES6 JavaScript with Babel, Sass and PostCSS for styling, responsive images and cached remote images, SEO metadata and Open Graph tags, SVG icon sprite generation, safe external links, useful shortcodes and filters, and a Neat error overlay. The template is optimized for production with source maps, headers, and minified code.

Features:

• Barebone 11ty: A minimalistic setup for Eleventy.
• Fast build with per env configs: The build process is fast and efficient thanks to the use of Babel-env, PostCSS-preset-env, and webpack.
• JS (ES6, Babel, Polyfills): Supports modern ES6 JavaScript syntax with Babel and polyfills for browser compatibility.
• CSS (Sass, PostCSS, Autoprefixer): Includes support for Sass, PostCSS, and Autoprefixer for easy styling.
• Optimized for production: The template is optimized for production with features like source maps, headers, and minified code.
• Responsive images and cached remote images: Supports responsive image handling and caching of remote images using the @11ty/eleventy-img package.
• SVG icon sprite generation: Bundles SVG files into a symbol sprite file and provides a shortcode for easy usage.
• SEO metadata and Open Graph tags: Includes built-in support for generating SEO metadata and Open Graph tags.
• Safe external links: Adds security measures to external links to prevent vulnerabilities.
• Useful shortcodes and filters: Provides a collection of useful shortcodes and filters, including those for handling dates, markdown, sprite icons, and responsive images.
• Neat error overlay: Includes a neat error overlay using the eleventy-plugin-error-overlay package.
• Prettier for formatting: Includes Prettier for code formatting.