Vite vs Webpack for WordPress Development

Webpack has been the standard build tool for WordPress development for years. Laravel Mix, WordPress Scripts, and most starter themes use it under the hood. But after switching to Vite, I cannot imagine going back.

The Speed Difference

Webpack bundled my theme assets in 8-12 seconds on every change. Vite does it in under 200ms. The difference comes from Vite serving source files directly via native ES modules during development, only bundling for production. Webpack bundles everything, every time.

The Setup

A basic Vite configuration for WordPress:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
    plugins: [react()],
    build: {
        outDir: "dist",
        manifest: true,
        rollupOptions: {
            input: "src/main.tsx",
        },
    },
    server: {
        origin: "http://localhost:5173",
    },
});

WordPress Integration

The key challenge is serving Vite assets through WordPress. During development, you point to the Vite dev server. In production, you read the manifest file to get hashed filenames:

function enqueue_vite_assets() {
    if (defined("VITE_DEV") && VITE_DEV) {
        wp_enqueue_script("vite-client", "http://localhost:5173/@vite/client", [], null);
        wp_enqueue_script("app", "http://localhost:5173/src/main.tsx", [], null);
    } else {
        $manifest = json_decode(file_get_contents(get_template_directory() . "/dist/.vite/manifest.json"), true);
        wp_enqueue_script("app", get_template_directory_uri() . "/dist/" . $manifest["src/main.tsx"]["file"], [], null);
    }
}

The Verdict

Vite is faster, simpler to configure, and has better defaults. If you are starting a new WordPress project, use Vite. If you have an existing Webpack setup that works, migration is straightforward but only worth it if slow builds are actually slowing you down.