Bundling Renderer Code – Vite & Webpack

Bundling Renderer Code – Vite & Webpack

Vite (fast dev server + Rollup build) example vite.renderer.config.js:

import { defineConfig } from 'vite';
export default defineConfig({
  root: 'src',
  build: {
    outDir: '../dist',
    emptyOutDir: true,
    rollupOptions: {
      input: 'src/index.html'
    }
  }
});

Run vite for dev, vite build for production.

Webpack example (simplified):

// webpack.renderer.config.js
const path = require('path');
module.exports = {
  mode: 'production',
  entry: './src/renderer.js',
  output: { filename: 'renderer.js', path: path.resolve(__dirname, 'dist') },
  module: { rules: [{ test: /\.css$/, use: ['style-loader','css-loader'] }] }
};

Both tools generate a single JS bundle that you load via a <script> tag in index.html.