frontend-boilerplate

An ES20XX starter with common frontend tasks using Webpack 5 as module bundler and npm scripts as task runner.

If you serve your files over HTTPS with HTTP/2, use compression (gzip, brotli...) for text-based resources, and respect accessibility rules, your lighthouse score will be 100%.

Setup

Requirements

Node ">=15.0.0" (use brew or install it from here)

brew install node

Clone the repository

OSX & Linux:

git clone --depth 1 https://github.com/dmnsgn/frontend-boilerplate.git && cd frontend-boilerplate && rm -rf .git && git init

Windows:

git clone --depth 1 https://github.com/dmnsgn/frontend-boilerplate.git && cd frontend-boilerplate && rd /s /q .git && git init

Dependencies

npm install

Configuration

Open config/config.js:

Key	Description	Type
PATHS	map of paths to the different folders needed by `webpack` and `npm scripts`	Map
BROWSERS	the browsers targeted for `babel-preset-env` and `browserslist` (see full list here)	Array

Open package.json:

Key	Description	Type
config.title	title used for metas and favicons	String
config.url	absolute url used for metas, robotstxt, sitemap and banner	String
config.lang	language for index.html and favicons	String
config.description	title used for metas, favicons and banner	String
config.imageWidth	width of the share image (default `${PACKAGE.config.url}/share.jpg`)	String
config.imageHeight	height of the share image (default `${PACKAGE.config.url}/share.jpg`)	String
config.type	Open Graph type	String
config.card	Twitter card	String
config.copyright	license acronym used for banner	String
config.handle	twitter handle for metas	String
config.analyticsUA	google analytics UA	String
config.pages	list of pages with id and optional name, description, EJS template for HtmlWebpackPlugin	Array
author.name	author name used for favicons	String
author.url	author url used for favicons	String

Develop

npm run dev
// or npm start

Production

npm run prod
// or npm run build

Features

Webpack loaders

Babel with preset-env and TypeScript
PostCSS: see config/loaders/styles.js
Sass
Less
Stylus
fonts as Resources assets
images as Resources assets, with automatic avif and webp fallbacks with convert-assets-webpack-plugin and <picture> wrapping using posthtml, optimised with image-webpack-loader
videos as Resources assets
svg as Resources assets and optimised with svgo-loader or as sprite with svg-sprite-loader
html-loader
ejs-loader
glslify
markdown-it-loader with markdown-it-attrs and markdown-it-toc-done-right

Webpack plugins

DefinePlugin: create global constants which can be configured at compile time
HotModuleReplacementPlugin: enable Hot Module Replacement
HtmlWebpackPlugin with Lodash templates: simplify creation of HTML files
HtmlWebpackProcessingPlugin: HTML pre-processing and post-processing for html-webpack-plugin.
MiniCssExtractPlugin: lightweight CSS extraction plugin
CssMinimizerWebpackPlugin: uses cssnano to optimize and minify your CSS.
PurgecssWebpackPlugin: remove unused css.
CrittersWebpackPlugin: inlines critical CSS and lazy-loads the rest.
SpritesmithPlugin: convert a set of images into a spritesheet and SASS/LESS/Stylus mixins
CompressionPlugin: Prepare compressed versions of assets to serve them with Content-Encoding (default to gzip). Requires server configuration so it is commented here
GenerateSW: The GenerateSW plugin will create a service worker file for you and add it to the webpack asset pipeline.
BannerPlugin: add a banner to the top of each generated chunk.
ObsoleteWebpackPlugin: A Webpack plugin generates a browser-side standalone script that detects browser compatibility based on Browserslist and prompts website users to upgrade it.
WebpackBundleAnalyzer: Visualize size of webpack output files with an interactive zoomable treemap.

dmnsgn/frontend-boilerplate