Webpack Sass Bootstrap Boilerplate screenshot

Webpack Sass Bootstrap Boilerplate

Author Avatar Theme by Shamin
Updated: 2 Feb 2021
94 Stars

Sass, Babel & Bootstrap boilerplate with Webpack building, Dev Server and Live Loading

Categories

Overview

The Webpack Sass Bootstrap boilerplate starter is a tool that allows users to quickly get started with Webpack bundling and building. It includes features such as Webpack 5 bundling, Babel ES6 Compiler, Sass Compiler, Bootstrap v4, jQuery 3.5.1, Popper.js, Webpack Dev Server, and gzip compression for both CSS and JS files.

Features

  • Webpack 5 bundling: Bundles the project files using Webpack 5.
  • Babel ES6 Compiler: Compiles ES6 code using Babel.
  • Sass Compiler: Compiles Sass (SCSS) files.
  • Bootstrap v4: Includes Bootstrap version 4 in the project.
  • jQuery 3.5.1: Provides jQuery for development.
  • Popper.js: Includes Popper.js library.
  • Webpack Dev Server: Sets up a development server for live reloading.
  • Generates gzip of both CSS and JS files: Compresses CSS and JS files generated by Webpack.

Installation

To get started with the Webpack Sass Bootstrap boilerplate starter, follow these steps:

  1. Make sure you have NodeJS installed, as it contains npm which is necessary for installing dependencies, starting scripts, and building the project.
  2. Clone the repository.
  3. Navigate to the project folder.
  4. Install all packages and dependencies required for this project by running npm install.
  5. Start the development environment by running npm start. This will start the Webpack Dev Server and you can access the project in your browser at http://localhost:8080.
  6. To build the project files, run npm run build.

Summary

The Webpack Sass Bootstrap boilerplate starter is a convenient tool for quickly setting up a project with Webpack bundling and building. It includes features such as Webpack 5 bundling, Babel ES6 Compiler, Sass Compiler, Bootstrap v4, jQuery, Popper.js, and live reloading with the Webpack Dev Server. It also provides gzip compression for the generated CSS and JS files. With this starter, users can easily get started with their web development projects.