Building a Web Page using Webpack

In this article, we will go over how to build a Web page and package it down to distributable production ready code using Webpack.

What is Webpack?

Webpack is quite simply a bundler, it takes your js modules with cross references and creates one static js file. It can also be configured with specialized loaders to handle files like jpgs, pngs, and css which it will package so that they are properly referenced to by your js file.

Why use Webpack?

By resolving dependencies and minifying code at packaging time instead of runtime, we optimize the speed the code can run at once it is in the hands of the client. So for your small prototype experiment which is never going to be used by a production customer, its probably overkill to use Webpack.

Walkthrough

We will now go through the steps of creating a simple Webpack app, with css, pngs and auto generated html.

package.json

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^6.7.2",
    "file-loader": "6.2.0",
    "html-webpack-plugin": "^5.5.0",
    "style-loader": "^3.3.1",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1"
  },
  "dependencies": {
    "lodash": "^4.17.21"
  }
}

First, we will add a dependency on lodash (just to demo using an outside module, lodash has nothing to do with Webpack). We also install dev dependencies for Webpack, the html plugin and the specialized loaders for stylesheets.

Static Files

We have two static files for this demo a png called icon.png and a css called style.css

style.css

.hello {
    color: red;
}

We will depend on these in our js code so we have to tell webpack to look out for these files and load them properly.

JS files

We have two js files, one is print.js which has a simple function we want to use, and one is index.js which will be the entry point for our app.

print.js

export default function printMe() {
    console.log('I get called from print.js!');
}

index.js

import _ from 'lodash';
import printMe from "./print";
import './style.css';
import Icon from "./icon.png"

function component() {
    const element = document.createElement('div');
    const btn = document.createElement("button");

    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    element.classList.add('hello');

    const myIcon = new Image();
    myIcon.src = Icon;

    element.appendChild(myIcon);

    btn.innerHTML = "Click Me!";
    btn.onclick = printMe;

    element.appendChild(btn);

    return element;
}

document.body.appendChild(component());

The print file just has one exported function to log a message to the console.

In our index.js you can see we have a LOT of dependencies on static assets as well as js functions. This is where Webpack will help, by inlining the js code, style and png references into one file.

Webpack.config.js

This is the important part so we will go through each piece of the config.

const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        index: './src/index.js'
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: "Demo"
        })
    ],
    output: {
        filename: "[name].bundle.js",
        path: path.resolve(__dirname, 'dist'),
        clean: true
    },
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.(png|svg|jpg|jpeg|gif)$/i,
                use: 'file-loader'
            }
        ]
    }
}

Imports

We import path to get the correct paths for our outputs and we import html-webpack-plugin to allow us to use it in the plugin section later.

Entry

Here, we call out the entry point (which is the file we want to pack the dependencies for). You could have multiple entries by just adding another index: someFile.js inside the entry object.

Plugins

Here we specify any plugins we are using, I am using the HtmlWebpackPlugin with a parameter title: Demo so the generated index.html will have the title demo.

Output

The first field tells us the filename of our packaged entry point js files (so for instance, our index.js will be called index.bundle.js). The path tells us where to put the packed files, and clean: true means we should delete the output directory each time we build (so we don’t have any files from past builds in there).

Module

This is where we can specify loaders for loading our static assets into our bundled package directory. We can provide a regex string for the test field which will be used to check the files in our src and match each with a rule. Once we have a match, the file will be loaded with the loader(s) specified in the use field.

This concludes are brief introduction to Webpack , now you should feel comfortable configuring your application to use the basic features of the Webpack system. For more advanced use cases, check the Webpack guides.