Upgrade to Vite

[Driton007]

Requirement:
Statamic ≥ v3.3.18
Laravel ≥ v9.19.0

1. Run composer update to update your laravel and Statamic to the latest version.
2. Run npm install --save-dev vite laravel-vite-plugin
3. Create vite.config.js on root directory file and paste this code

import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";

export default defineConfig({
    plugins: [
        laravel({
            input: ["resources/js/site.js", "resources/css/tailwind.css"],
            refresh: ["resources/views/**"],
        }),
    ],
    envPrefix: "MIX_",
});

4. On package,json inside script tags paste this

"scripts": {
    "dev": "vite",
    "build": "vite build"
},

should look like this ^

5. Create this file on the root directory postcss.config.js
   and paste this code

    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
};

6. On resources/views/layout.antlers.html
   Replace this tag

<link rel="stylesheet" href="{{ mix src='css/tailwind.css' }}">
<script src="{{ mix src='/js/site.js' }}" defer></script>

with

{{ vite src="resources/js/site.js|resources/css/tailwind.css" }} 

7. Execute these command
   rm webpack.mix.js
npm remove laravel-mix

8. And finally run npm run dev for development site.