Meet Vitesse

Vitesse is the quickest way to use Vite with ExpressionEngine. Tell a template which entry points it needs, and Vitesse prints the right tags for them:

While you work, from Vite's dev server, with hot module replacement: save a stylesheet and the page updates without reloading.
When you publish, from your build, with the hashed file names, the stylesheets your scripts import, and preloads for the chunks they need.

The template is the same either way:

templates/default_site/_partials/layout.html
<head>
    {exp:vitesse:css files="resources/js/app.js"}
</head>
<body>
    {layout:contents}
    {exp:vitesse:js files="resources/js/app.js"}
</body>