Search for a command to run...
Series
JavaScript is the core part of web development. In this series, we will crate a Multi-Page JavaScript Boilerplate with Webpack 5, Babel, Prettier and Github-Actions.
Setting up a boilerplate using Webpack seems daunting at first unless I set it up step by step and found that it wasn’t as difficult as I thought it to be. If you are looking to set up a multi-page JavaScript project using Webpack 5, you have come to...
This article is a continuation of part 1. In part 1, we set up Webpack. In part 2, we are going to set up HTML templates and CSS. 2. Setup HTML templates using Webpack Plugins You might have noticed that there is only one file named index.bundle.js i...
This article is a continuation of Part 2. In Part 2, we set up HTML templates and CSS. Now, we'll configure Babel, the Assets folder and hot reload. 3. Configure Babel We want to use the latest JavaScript features cross-browser. For this, we need to ...
This article is a continuation of Part 3. In this article, we will add configurations to set up multi-page HTML templates. Setup Multi-Page using Webpack HTML, CSS and JS files are working now but wait! We handle single file. How to handle multiple f...
This is a continuation of Part 4. In Part 5, we will set up ESLint and Prettier. ESLint and Prettier We want to enforce best practices and formatting throughout the project. npm install --save-dev eslint-webpack-plugin eslint @babel/eslint-parser es...
This is a continuation of Part 5. This is the last part. In this part, we will set up Husky and Github-Actions. Setup lint-staged and Husky Pre-Requisite: Set up git in the project. Run command git init to initiate it. It is a tedious process to run ...