Corey Beres

← Back to home

Replacing Webpack/Babel in 2026

Mon, Jan 5, 2026

I made a simple, mostly-JavaScript website using Webpack and Babel in 2017. Nine years later I was dreading the thought of working on this project again. But I found a solution.

The website is Spin the Choice. I currently own spinthechoice.com, but I'm planning to let it expire. Spin the Choice is a wacky game invented by the cartoon character Peggy Hill (of King of the Hill). The rules were never made clear—one challenge was making it into an actual, playable game.

I've always been more of a back-end person—more familiar with Gradle than with however we're currently building our JavaScript projects. I guess in 2017 we were using Webpack and Babel? But I didn't make many projects with this setup, so I got little experience with these tools.

I thought I might want to update Spin the Choice at some point. However there's the barrier of all the unfamiliar tools I used: Webpack, Babel, Bootstrap.

I learned of Vite yesterday. It does everything I need for this simple website with very little configuration! I swapped in Vite in two commits

  1. replace everything with vite
  2. oops add the rules page

First I created a project from a template:

npm create vite@latest spin-the-choice-v2 -- --template vanilla

I moved the HTML files out of the src directory. I added type="module" to the script tag. I had to add a link tag for my CSS. And I removed the onreadystatechange handler.

The one bit of configuration I needed was to list the HTML pages (see the second commit). I had to update the Github actions as well.

  1. new Node version
  2. updated action versions
  3. the Github Pages action finds the website in a different folder

Other than a few hiccups, the migration went very smoothly. I'm glad I made the switch to Vite. There's almost no boilerplate code. I feel like I could revisit this project in a few years and feel much more comfortable working on it.

tags: