Vite Config | WordPress Theme

This vite.config.js is tailored for a WordPress theme setup — supporting a fast development workflow, hot module reloading, automatic ACF block handling, and an optimized build for deployment.

Key Highlights

📦 Dynamic Block Entries

• getBlockEntries() automatically scans assets/blocks/*/*.js for block scripts.
• Only includes files where the folder name matches the file name (e.g. hero/hero.js).
• Uses the full relative path as the Rollup input key to keep the manifest accurate.
• Ensures every block gets its own independent JS build.

🛠 Build Configuration

• Dynamic base URL:
  • / in dev mode
  • /wp-content/themes/THEMENAME/dist/ in production
• Output settings:
  • JS files flattened into /js/filename.js
  • CSS files flattened into /css/filename.css
  • Other assets hashed and stored in /assets/
  • Separate hashed chunk files for code splitting
• Manifest generation for WordPress integration

⚡ Dev Server Setup

• Runs on port 3000 (strict — no auto-switching if in use)
• HMR (Hot Module Replacement) via WebSockets
• CORS enabled for cross-origin requests
• Proxy configuration to forward PHP and other backend routes to http://THEMEURL
• Auto-refresh whenever any .php file changes

🎨 Plugins

• vite-plugin-sass-glob-import — allows @import of entire SCSS directories
• vite-plugin-full-reload — reloads the browser on .php changes
• fast-glob — scans and generates dynamic entries for ACF blocks

Why This Setup Works for WordPress

• Handles global theme scripts and per-block scripts in one build pipeline
• Matches WordPress’ PHP-based routing by proxying unknown requests
• Builds production files into a /dist folder ready for enqueueing
• Keeps assets lean and organized for both dev and production