PBS 139 of X — Bundling a Web App/Site with Webpack (Part 2)

In our last installment of Programming By Stealth, Bart started teaching us how to bundle an app/website using our bundler of choice, Webpack. The app/website he's creating for us is very simplified but is intended to allow us to exercise every one of the kinds of things we'd want to bundle. This week we finish all of the tools he wanted to teach us to bundle.

In PBS 138, after explaining to us why we would want to do this, and initializing things, he taught us to import a pure JavaScript library with jQuery as an example, and a pure CSS library with basic Bootstrap as the example.

In this week's show, we learn how to install and use Mustache for templating in a Webpack world. The process is quite a bit different from how we originally learned to implement Mustache in Programming By Stealth.

Then we learn how Bootstrap 5 now lets us import just what we need (instead of all of Bootstrap). We need some fancy icons so Bart teaches us about Bootstrap icons which he now favors for free icons over Font Awesome. Our web app wouldn't be complete if we didn't have a fun font, so we learn to import free web fonts from Fontsource all with Webpack.

Like the first half of the Webpack worked example, Bart's process of doing repetitive actions but for different reasons definitely helped cement the concepts for me.