Updating Yarn and Webpack

Posted on July 14, 2020 with 421 words.

I’ve been using JAMstack on my website for quite sometime and I’m happy with it although there were frustration and confusion along the way but it’s part of learning.

This site is powered by Hugo, I use Yarn instead of npm, and Webpack as a module bundler. I am not a pure developer. I’m a graphic artist and a photographer yet I was able to grasp how to build a website without using WordPress.

When I wake up around lunch, I only launch four things when the computer loads:

  1. The un-Googled Chrome
  2. A text editor
  3. PowerShell
  4. Explorer++

I feel bad that sometime I can’t my emails because I’m pre-occupied with making adjustments on my website although I read them when I’m free.

This past few days, I’ve reading about the new version of Yarn and Webpack: Yarn 2 and Webpack 5. I was hesitant to migrate my website in using both new versions but I “had” to though because at some point, we will be using both version anyway.

During the course of developing my website, I used CMD and Bash (mostly with CMD) paired with Node Version Manager (NVM) so that it’s easier to switch Node.js versions as required by the dependency. At some point, I really wanted to use Chocolatey because I want install apps like in Linux but Chocolatey is so hard to set-up and it’s complicated.

An alternative to Chocolatey is Scoop and it’s easier to setup because the apps / packages will be installed on the user’s account and it only requires PowerShell. I just gave it shrug and now I’m obsessed with using PowerShell. I’ve also changed my Node.js version switcher to Node Version Switcher.

Back to Yarn 2 and Webpack 5. Since I’m not a developer per se, I only notice things based on my usage of both apps.

In Yarn 2, outdated is dropped. I had to install a different dependency called npm-check-updates to see if I have a latest version of my dependencies. Pairing Yarn 2 with Webpack 4 will be tricky because there is no node_modules. Everything is cached in a .yarn folder and you may need to add a Plug n' Play (PnP) dependency named pnp-webpack-plugin but PnP is supported by default in Webpack 5.

For Webpack 5, a bunch of configurations were depreciated which prompted me to update my config code.

I have to explore more of Webpack 5 and Yarn 2. For now, I’m not surprised if I encounter errors along the way. Part of learning new tools.

This work is licensed under CC BY-SA 4.0

Last build time: May 9, 2021 at 08:09 (UTC)

This site contains easter eggs.