Overview:

The tris-webpack-boilerplate is a webpack boilerplate for beginner, intermediate, and advanced developers looking to create static websites quickly while achieving optimal performance. It is an evolution of tris-gulp-boilerplate, now with Webpack 4. The goal of this project is to cater to beginners who need more thorough explanations, side-project hustlers who want to quickly get their ideas out into the browser, and those who are obsessed with achieving perfect scores on performance and optimization reports.

Features:

Webpack Config Split: Production and development builds are split into separate configurations.
Webpack Development Server: Includes a server for easy development and testing.
HTML assets and minification: Supports HTML assets and minifies them for optimal performance.
404 page not found: Includes a custom 404 page for handling non-existent URLs.
SCSS to CSS + optimizations: Compiles SCSS files into CSS and applies optimizations.
ES6 transpiling: Transpiles ES6 code to ensure cross-browser compatibility.
Browserslist: Uses Browserslist to generate a minimal list of browser versions that need to be supported.
Image assets + compression: Supports image assets and compresses them for performance.
Font loading + preloading: Manages font loading and preloading for faster website rendering.
Asset compression: Compresses website assets for faster delivery.
Clean Webpack Plugin: Cleans the output folder before every build.
Sourcemaps: Provides source maps for easier debugging.
Favicon generation: Generates favicons in different sizes for different platforms.
Offline first and caching: Implements offline-first strategies and caching for better user experience.
Progressive Web App (PWA): Includes features to turn the website into a progressive web app.
Gotcha's: Covers common issues and challenges with website optimization.
Contributing: Provides guidelines for contributing to the project.

Summary:

The tris-webpack-boilerplate is a webpack-based boilerplate that aims to simplify and optimize the process of creating static websites. It provides a comprehensive set of features such as asset optimization, responsive image handling, ES6 transpiling, and progressive web app support. The boilerplate is suitable for developers at different skill levels, from beginners to advanced users. It offers a clear and concise installation process and provides thorough documentation on each of its features. Overall, the tris-webpack-boilerplate is a powerful tool for developers who seek to create high-performance websites efficiently.

Tr1s

Tris Gulp Boilerplate

Tris Webpack Boilerplate