• 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.

• node: >=14
• yarn or npm

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

• 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

Yarn

yarn dev

NPM

npm run dev

Yarn

yarn build

NPM

npm run build

Yarn

yarn watch

NPM

npm run watch

Yarn

yarn production

NPM

npm run production

• 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

Yarn

yarn stats

NPM

npm run stats

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