How do I generate a Service Worker with Workbox 6.5.4? - progressive-web-apps

Question

I am trying to build a simple PWA (no frameworks) with the help of Workbox. For that I have been following tutorials on how to use workbox as well as looking at the official documentation. I tried generating a Service Worker with Workbox but the files generated seem very different to what I have seen in those tutorials.
I have noticed that all these tutorials were done with pretty old versions of Workbox (3.0 e.g.), so I am curious if I am missing some requirements since I am working with Workbox 6.5.4.
The first steps I took after creating the App shell:
npm install workbox-cli -g
workbox wizard (to generate workbox-config.js)
workbox generateSW / workbox generateSW workbox-config.js
Register Service Worker in my index.html
In all the tutorials I have seen, I see that one js file named "sw.js" is created when running workbox generateSW. However, when I do so it creates 4 js files ("sw.js", "sw.js.map", "workbox-d249b2c8.js", "workbox-d249b2c8.js.map"). I don't understand the content of them at all.
Contents of sw.js e.g.
if(!self.define){let e,s={};const i=(i,r)=>(i=new URL(i+".js",r).href,s[i]||new Promise((s=>{if("document"in self){const e=document.createElement("script");e.src=i,e.onload=s,document.head.appendChild(e)}else e=i,importScripts(i),s()})).then((()=>{let e=s[i];if(!e)throw new Error(`Module ${i} didn’t register its module`);return e})));self.define=(r,t)=>{const d=e||("document"in self?document.currentScript.src:"")||location.href;if(s[d])return;let n={};const o=e=>i(e,d),c={module:{uri:d},exports:n,require:o};s[d]=Promise.all(r.map((e=>c[e]||o(e)))).then((e=>(t(...e),n)))}}define(["./workbox-d249b2c8"],(function(e){"use strict";self.addEventListener("message",(e=>{e.data&&"SKIP_WAITING"===e.data.type&&self.skipWaiting()})),e.precacheAndRoute([{url:"css/main.css",revision:"d3072ab3693c185313018e404e07d914"},{url:"index.html",revision:"4fc118da921f59395f9c5d3e2ddd85b0"},{url:"js/app.js",revision:"aa3d97a8701edd5dae0d6a9bb89d65bd"}],{ignoreURLParametersMatching:[/^utm_/,/^fbclid$/]})}));
//# sourceMappingURL=sw.js.map
It looks completely different to the template generated in other tutorials... In the official documentation I don't see them go into detail about the file(s) that is created after running workbox generateSW. I still tried to see if the Service Worker would work since it said The service worker will precache 3 URLs, totaling 1.65 kB after I ran the command. Sadly, when I ran my http-server and DevTools there was no Service Worker to be found.
Thanks a lot in advance (feel free to tell me, if you need more information in order to solve this issue)!!