JavaScript Bundling — Vite, Webpack, esbuild

Also Known As

TL;DR

Explanation

PHP serves static assets (JS, CSS) either directly or via a bundler output. Vite (Rollup-based): instant dev server with HMR, fast production builds — recommended for new projects. Webpack: mature, rich plugin ecosystem, complex config — used in Laravel Mix. esbuild: Go-based, 10-100x faster than Webpack, minimal config. Laravel Vite plugin: integrates Vite with PHP's asset manifests. Bun: JS runtime + bundler. All output a manifest.json (or similar) mapping source files to hashed production filenames PHP uses.

Common Misconception

Why It Matters

Common Mistakes

• Serving unbundled node_modules in production
• Not using the asset manifest for PHP template references
• Committing dist/ folder to git instead of building in CI

Code Examples

<!-- Referencing src file directly — no cache busting, no minification: -->
<script src="/resources/js/app.js"></script>

<!-- Vite manifest.json: {"resources/js/app.js": {"file": "assets/app.Abc123.js"}} -->

<!-- PHP reads manifest for hashed filename: -->
<?php
$manifest = json_decode(file_get_contents(public_path('build/manifest.json')), true);
$appJs = $manifest['resources/js/app.js']['file'];
?>
<script src="/build/<?= $appJs ?>" type="module"></script>
<!-- Or use Laravel's @vite('resources/js/app.js') directive -->

References

• ↗ https://vitejs.dev/guide/backend-integration.html

Tags

Related Terms