Front-End Development

WhatPack? A FED guide to webpack’s mysteries.

Webpack Blog Meme

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

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

 

 

 

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Ed Murphy

Ed Murphy is a Front End development veteran with over 20 years of experience. He’s constantly investigating the newest technologies available for the front-end developer and enjoys teaching others, as that’s the best way to teach yourself.

More from this Author

Follow Us
TwitterLinkedinFacebookYoutubeInstagram