Frontend Webpack Boilerplate

Overview:

The Frontend Webpack Boilerplate is a starter project template for web developers. It utilizes various tools and technologies such as Locomotive Scroll, Barba, and Vanilla lazyload to enhance website performance and provide smooth transitions between pages. The boilerplate also includes features like a CSS architecture, dynamic JavaScript module rendering, and support for asset optimization in the production environment. It is built using the latest versions of Webpack, SASS/PostCSS compiler, and Babel JavaScript compiler.

Features:

• Uses Locomotive Scroll: Enables smooth scrolling with parallax effects and detects elements in the viewport.
• Uses Barba: Creates fluid and smooth transitions between website pages.
• Uses Vanilla lazyload: Speeds up web application by deferring the loading of below-the-fold images.
• CSS architecture: Includes generic and base styles, custom configuration, grid, utilities, mixins, etc.
• Dynamic JavaScript modules rendering: Provides a reference (example.js file) for rendering JavaScript modules dynamically.
• Configuration per environment: Different configurations for development (sourcemaps, browser synced development server) and production (minification, sourcemaps).
• Asset optimization for production: Supports code minification of JavaScript and CSS files, optimizes assets loading (inline and embed images/fonts), and respects configured supported browser versions.
• Latest Webpack 5: Utilizes the latest version of Webpack as the JavaScript module bundler.