javascript boilerplate using webpack 5

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 the right place.

In this series, we are going to set up a multi-page JavaScript boilerplate from scratch. Each step will be explained briefly. I have not used definitions from package documentation but tried to briefly explain how each package is used in the project.

Here is the overview of what you are going to cover in the complete series

Setup Webpack 5
Configure HTML templates and CSS
Configure Babel, Assets folder and hot reload
Setup Multi-Page
Setup ESLint and Prettier
Setup Lint-Staged and Husky
Setup basic Github-Actions

1. Setup Webpack 5

Open the terminal app, create a directory for your project and initialize a new Node.js project. Let’s name it javascript-boilerplate.

mkdir javascript-boilerplate
cd javascript-boilerplate
npm init -y

This will create package.json file in the project's root directory. This file will be used to maintain project metadata along with project dependencies.

Create src, images and fonts folder**, and index.js** file.

mkdir -p src src/assets/fonts src/assets/images
cd src
touch index.js index.html

Add index.html template.

<!-- index.html -->
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Title</title>
</head>
<body>
<div id="root">
    <h1>This is a JS boilerplate</h1>
</div>
</body>
</html>

The folder structure should look like this.

Install webpack and webpack-cli

npm install --save-dev webpack@5 webpack-cli@5

webpack — It is a module bundler for JavaScript applications. It is primarily responsible for taking all javascript files, CSS files, image files, and other assets and combining them into single or multiple output files.

webpack-cli — It is a command-line tool for configuring Webpack.

Next, create webpack.config.js file in the project's root directory.

touch webpack.config.js

Add configs in webpack.config file.

const path = require('path');

module.exports = {
 entry: {
   index: './src/index.js',
 },
 output: {
   filename: '[name].bundle.js',
   path: path.resolve(__dirname, 'dist'),
   clean: true,
 },
};

Entry — An entry point is a JavaScript file (one or multiple) where webpack starts its bundling process. It traverses the project’s dependency graph from these entry points. We defined a single entry path for the root.

Output — It indicates that the module defined in the entry object will be converted to a bundle and the result will be copied into /dist folder. We are appending bundle.js with file name. Notice the clean flag. It is used to empty the /dist folder before creating a new build.

We are ready to generate a build. we will use webpack --mode development command to generate a build. The default mode is production in Webpack therefore we explicitly defined development mode through command.

Open package.json file and add an entry in the script object. We can directly

"scripts": {
  "dev": "webpack --mode development"
},

Run npm run dev and you should see the dist/ folder inside the project root.

Note: we can directly use webpack --mode development but we want to simplify the command therefore we added it in script object.

We are done with the basic configurations to run the boilerplate.

In the next article, we are going to add configurations for HTML and CSS files.

SehrNaveed

SehrNaveed

Create a Multi-Page JavaScript Boilerplate with Webpack 5, Babel and ESLint (Part 1)

1. Setup Webpack 5