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:

Open package.json:

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.

npm scripts

• npm run clean: remove all the files from the dist directory
• npm run favicons: generate favicons files and /src/templates/_favicons.ejs
• npm run robotstxt: generate robots.txt file
• npm run sitemap: generate sitemap.xml file

Prettier formatter

• Prettier
• ESLint Prettier Plugin
• ESLint Prettier Config

Licence

MIT