Migrating my Electron app from Webpack to Vite

I got started with the boilerplate electron-webpack-quick-start two years ago because the official website of electron-builder recommended it. As a starter kit, electron-webpack-quick-start played a role in saving time.

But the troubles related to it were increasing over time. The main reason was that both electron-webpack-quick-start and electron-webpack were unmaintained. These modules limited the versions of both Electron and Webpack. Some legacy methods of Node.js remained.

electron-webpack-quick-start limits the versions of both electron and webpack

As long as I depended on electron-webpack-quick-start and electron-webpack, I couldn't upgrade all of Electron, Webpack, and Node.js. It was a big problem.

Replace a module bundler

To solve this problem, I decided to change a bundler from Webpack to Vite because electron-webpack itself introduced it.

Project Status: maintenance mode. Consider using Vite instead of Webpack.

Because setting up webpack in the electron environment shouldn't be difficult.

If I get a new bundler like Vite, I can remove electron-webpack which caused me a lot of trouble. Of course, electron-webpack-quick-start will disappear together.

Migrate Webpack to Vite

I am new on Vite and want to save learning time as far as possible. The boilerplate vite-electron-builder is a good choice. This boilerplate doesn't depend on other modules using Vite. So The tragedy in electron-webpack never happens.

The migration steps from Webpack to Vite in my Electron app (Read it easy) are

  1. Clone vite-electron-builder boilerplate and run npm install.
  2. Copy the source code to the boilerplate and install some npm packages.
  3. Modify the entry points in vite.config.js of all the processes like main, preload, and renderer.
  4. Replace the webpack resolver with the esm resolver.
  5. Install Tailwind CSS, PostCSS, and autoprefixier.

After these migration steps, npm run watch launches a dev server of Vite and a template in an Electron app shows.

Next

This migration allows Read it easy to upgrade Electron and Node.js. Is this a happy ending? No. It is very hard to upgrade the version of Electron from 8.2.0 to 24.0.0. This is the next challenge after the bundler migration.