WhatPack? A FED guide to webpack’s mysteries.

What’s the problem?

Web development has had innumerable changes over the years and the term “front end” developer has expanded to include new ways to layout pages, new JavaScript libraries to learn and new ways to style your creations.   This complexity comes with challenges on how to organize everything. In an Enterprise team environment the need to optimize for many devices, keep track of where things are and what they do is vitally important.

As good developers we break out our code into separate files that are related to portions of our site for easy editing and readability but we then run into the problem of how to put this all together in a maintainable way.  This is where webpack comes in.

What Webpack does

Webpack at the simplest level is able to do any file conversion (transpiling) needed that any browser can understand and condense whatever you tell it into a single file.  This would be a javascript file, but we don’t usually use just one JS file, as front end people we want a CSS file too! More on this later.

How webpack is set up

Webpack is a Node.js module, so make sure you install that on your system first! https://nodejs.org/en/download.

You start by initializing it in your project directory.  When you initialize node, a new folder called “node_modules” is created and anything Node might need is put in there. This changes as you install other things.

Installing Node

npm init -y    // tell node to create needed files and don't ask me questions

Installing Webpack

Next, we can install webpack. There are two parts. First are the core files for webpack, the second is the command line interface (CLI) which we need to give webpack commands in the terminal window.

npm install webpack webpack-cli --save-dev

A note on dependencies
When installing modules, some may only be needed while you are developing (development), and some might be needed on the server (production).  To tell node how to treat each you use a command line option of –save for use on production or –save-dev for use only for local development. This will be written to a file called “package.json” in the appropriate spot.

The package.json file

Whenever you first install a module a file called package.json is created in your project root folder.  This keeps track of all the regular and dev dependencies your application requires.  It will by default get the latest of each and have a ^ at the start of the version meaning it will auto-update to get the latest compatible (usually only minor) version.  If you don’t want that to happen, remove the caret from the start.

A sample package.json file:

{
  "name": "Webpack5",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack --config webpack.dev.config.js",
    "prod": "webpack --config webpack.prod.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.20.5",
    "@babel/preset-env": "^7.20.2",
    "babel-loader": "^9.1.0",
    "clean-webpack-plugin": "^4.0.0",
    "css-loader": "^6.7.2",
    "html-webpack-plugin": "^5.5.0",
    "mini-css-extract-plugin": "^2.7.2",
    "sass": "^1.56.2",
    "sass-loader": "^13.2.0",
    "style-loader": "^3.3.1",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.11.1"
  },
  "dependencies": {
    "handlebars": "^4.7.7"
  }
}

There are many things already installed in this package.json file and we’ll go over some of the most important ones in future entries.

A forest of trees

Choosing a Global Software Development Partner to Accelerate Your Digital Strategy

To be successful and outpace the competition, you need a software development partner that excels in exactly the type of digital projects you are now faced with accelerating, and in the most cost effective and optimized way possible.

Get the Guide

In the beginning, I explained that webpack pulls things together into a single javascript file, but how?

The way webpack knows where to find things is for us to tell it where to find a javascript file to read further instructions. This is called a configuration file.  The “config” file gives webpack the location of our “entry” point, or points.  This is just a path to a folder or an index.js file. If you don’t specify an index.js file, it will try to find it by default in the folder specified.

OK, but how does it start looking?

Back in that package.json file there is a section called “scripts.”  It gets generated with a default one, you can remove that.
Soon, we’ll be “running” one of these scripts and that’s how webpack gets started.

Here we have two scripts that point to separate configuration files.  Just a heads up we usually have two so you can do things faster when developing running “dev”, and when you are ready to produce code for the server, you run the “prod” script instead. We’ll get to that later.

 "scripts": { 
     "dev": "webpack --config webpack.dev.config.js", 
     "prod": "webpack --config webpack.prod.config.js" 
  }

What the config files will contain are all the rules, locations, and other settings webpack needs to collect everything into our final files.

We’ll be setting things up for webpack to:

1. read a configuration file
2. find the index.js file
3. the index.js will usually include other files like more js, css, sass or even images.
4. process everything as needed
5. output the final files we need in the formats we specify
6. profit?

The whole process is branching from the first index.js to any other files it requires all the way down the line.

Next: Webpack: It Configures