Updating Yarn and Webpack
I've been using JAMstack on my website for quite some time, and I'm happy with it, although there were frustration and confusion along the way, but it's part of the learning process.
The website is powered by Hugo. I use Yarn instead of npm and Webpack as a module bundler. I am not a pure developer. Furthermore, I'm a graphic artist and a photographer, yet I was able to grasp how to build a website without using WordPress.
When I woke up around lunch, I only launched four things when the computer loaded:
- The un-Googled Chrome
- A text editor
- PowerShell
- Explorer++
I feel bad that sometimes I can’t read my emails because I'm preoccupied with making adjustments on my website, although I read them when I have the time.
This past few days, I’ve been reading the new versions of Yarn and Webpack: Yarn 2 and Webpack 5. I was hesitant to migrate my website using both new versions, but I "had" to, though, because at some point, we will be using both versions anyway.
While 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 wanted to 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 set up because the apps/packages will be installed on the user's account, and it only requires PowerShell. I just gave it a 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 had the 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 deprecated, 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.