Frontend webpack boilerplate

   

Features

• Uses Locomotive Scroll for detection of elements in viewport & smooth scrolling with parallax effects.
• Uses Barba to create fluid and smooth transitions between your website's pages.
• Uses Vanilla lazyload to speed up your web application by deferring the loading of your below-the-fold images.
• CSS architecture containing generic and base style, custom configuration, grid, utilities, mixins etc.
• Dynamic javascript modules rendering (example.js file as a reference).
• Configuration per environment
  • development - sourcemaps, browser synced developmentment server
  • production - minification, sourcemaps
• The built CSS / JavaScript files will respect the configured supported browser versions using the following tools:
  • autoprefixer - automatically adds vendor prefixes to CSS rules.
  • babel-preset-env - smart preset that allows you to use the latest JavaScript without needing to micromanage which syntax transforms (and optionally, browser polyfills) are needed by your target environment(s).
• Support for assets optimization for production environment with ability to configure:
  • Code Minification of JavaScript and CSS processed files.
  • Optimize Assets Loading - inline and embed images / fonts files having file size below a configurable threshold value.
• Latest Webpack 5 - JavaScript module bundler.
• Latest SASS/PostCSS compiler based on Dart sass.
• Latest Babel 7 JavaScript compiler.
• Configured and ready to use Webpack Dev Server plugin for faster local development - webpack-dev-server
• Integration with Webpack Bundle Analyzer - Visualize size of webpack output files with an interactive zoomable treemap.

Requirements

• node: >=14
• yarn or npm

Installation

Yarn

git clone git@github.com:gcolombi/frontend-webpack-boilerplate.git project-name
cd project-name
yarn install

NPM

git clone git@github.com:gcolombi/frontend-webpack-boilerplate.git project-name
cd project-name
npm install

Replace the original remote repository with your project's repository.

Update the following files to suit your project:

• README.md
• package.json:
  • name: frontend-webpack-boilerplate
  • description: Starter project template boilerplate ...
  • author: Gérard Colombi
• site.webmanifest
  • name: Frontend webpack boilerplate
  • short_name: Boilerplate

Development

Assets Source

• SASS/SCSS/PostCSS: src/assets/styles/
• JavaScript: src/assets/scripts/
• Images: src/assets/images/
• Fonts: src/assets/fonts/
• HTML: src/templates/
  • It will automatically build all HTML files placed under src/templates/ in dist directory.

📦src
 ┣ 📂assets
 ┃ ┣ 📂fonts
 ┃ ┣ 📂images
 ┃ ┃ ┣ 📂favicons
 ┃ ┃ ┣ 📂svg
 ┃ ┃ ┗ 📜example.jpg
 ┃ ┣ 📂scripts
 ┃ ┃ ┣ 📂base
 ┃ ┃ ┣ 📂modules
 ┃ ┃ ┣ 📂utils
 ┃ ┃ ┣ 📜app.js
 ┃ ┃ ┣ 📜lifecycle.js
 ┃ ┃ ┗ 📜store.js
 ┃ ┗ 📂styles
 ┗📂templates
   ┣ 📜container.html
   ┣ 📜form.html
   ┣ 📜grid.html
   ┣ 📜images.html
   ┣ 📜index.html
   ┗ 📜spacing.html

Build/Compile Assets

Start a development server

Yarn

yarn dev

NPM

npm run dev

One time build assets

Yarn

yarn build

NPM

npm run build

Compile and watch assets

Yarn

yarn watch

NPM

npm run watch

Production

Build Assets

Yarn

yarn production

NPM

npm run production

Built Assets Source

• CSS: dist/assets/
• JavaScript: dist/assets/
• Images: dist/assets/images/
• Fonts: dist/assets/fonts/
• HTML: dist/

📦dist
 ┣ 📂assets
 ┃ ┣ 📂fonts
 ┃ ┣ 📂images
 ┃ ┃ ┣ 📂favicons
 ┃ ┃ ┣ 📂svg
 ┃ ┃ ┣ 📂webp
 ┃ ┃ ┗ 📜example.jpg
 ┃ ┣ 📜app.css
 ┃ ┣ 📜app.js
 ┃ ┣ 📜example.js
 ┃ ┗ 📜forminput.js
 ┣ 📜container.html
 ┣ 📜form.html
 ┣ 📜grid.html
 ┣ 📜images.html
 ┣ 📜index.html
 ┗ 📜spacing.html

Additional Tool

Run Assets Bundle Analyzer

Yarn

yarn stats

NPM

npm run stats

This will open the visualisaion on the default configuraiton URL localhost:8888.