30. Laravel ahora usa Vite ¿Que ocurrió con Webpack?

En este capítulo de Laravel, hablaremos sobre el cambio reciente que ha sucedido en la configuración de Laravel, en la que se ha dejado de utilizar Webpack y se ha adoptado Vite como el nuevo paquete de herramientas para la compilación de activos. Vite es un paquete de herramientas moderno y rápido para la compilación de activos web, que se ha vuelto muy popular en la comunidad de desarrolladores web en los últimos años.

 

En este capítulo, te explicaremos por qué Laravel ha decidido hacer el cambio a Vite y cuáles son las ventajas que ofrece en comparación con Webpack. También cubriremos cómo configurar y utilizar Vite en tu proyecto Laravel, incluyendo la instalación de paquetes, la compilación de activos y la integración con Blade y otras características de Laravel.

Al final de este capítulo, estarás familiarizado con el cambio a Vite y tendrás los conocimientos necesarios para comenzar a utilizar Vite en tu proyecto Laravel y disfrutar de las ventajas que ofrece esta herramienta moderna y rápida.


4 comentarios

Inicia sesión para comentar

Comentarios:

  • Hector Monzon Contreras

    Hector Monzon Contreras hace 2 meses

    Buen dia! el video: 
    29. Como utilizar Bootstrap con Laravel Jetstream aparece como privado y no se puede acceder a el! :(

    • Yesenia Morales hace 1 mes

      Aun no se puede acceder a el :c

    • Victor Arana Flores hace 1 mes

      El paquete solo sirve para Laravel 8. Por eso lo oculte del canal

  • Sammy Joseph

    Sammy Joseph hace 1 año

    Si en caso suben su proyecto a producción en formato comprimido .zip, entonces asegúrense de eliminar el archivo ‘hot’ de la carpeta public, sino no les cargará los estilos del manifest.json
     

    • Gloria Coral hace 9 meses

      Gracias me ayudo

  • Oskar Byte

    Oskar Byte hace 1 año

    Buenas tardes. Por que cuando trato de ejecutar el comando npm run build, me dice que el termino ‘npm’ no se reconoce como nombre de un cmdlet. Alguien me puede apoyar. Gracias.

    • Victor Arana Flores hace 1 año

      porque no tienes instalado npm

    • Oskar Byte hace 1 año

      Ok. Muchas gracias por la ayuda. Por cierto el Curso esta excelente…

  • Walter

    Walter hace 1 año

    ? En cada nueva instalación de Laravel viene Vite por defecto dejando de lado Laravel Mix (un envoltorio en torno a Webpack: paquete que permite modularizar css, js e imágenes).

     

    El principal inconvenientes con Webpack es su rendimiento. Cada pequeña modificación en nuestro código requiere que webpack lea toda la cantidad de módulos completa para compilar y podamos ver la modificación que acabamos de hacer.

     

    Vite por el contrario si hacemos una pequeña modificación en nuestro código va a compilar solo esa modificación y la agrega al código ya compilado con anterioridad. Esto reduce drásticamente el tiempo de compilación.

     

    Para ver estos cambios creamos un nuevo proyecto con vite eligiendo livewire y sin teams:

    laravel new vite --jet

    Al final la instalación ejecuta automáticamente npm install y npm run dev.

    Este compilador se mantiene a la escucha de los cambios en nuestro código JS y CSS, y crea los assets que vamos a incluir dentro de nuestras páginas.

    En la raíz de nuestro proyecto tenemos el archivo vite.config.js donde indicamos los archivos que queremos que compile:

    input: [
    	'resources/css/app.css',
    	'resources/js/app.js',
    ],

     

    Si inspeccionamos en la ruta resources/views/layouts el archivo app.blade.php vemos dentro del head la siguiente directiva:

    @vite(['resources/css/app.css', 'resources/js/app.js'])

     

    Creamos también una base de datos llamada vite y ejecutamos las migraciones:

    php artisan migrate

     

    Para ver nuestro proyecto en 127.0.0.1:8000 ejecutamos el servidor:

    php artisan serve

     

    ? Para enviar nuestro proyecto a producción debemos ejecutar

    npm run build

    Uno de los archivos que se generan es manifest.json

    {
    	"resources/js/app.js": {
    		"file": "assets/app.ab93cf8a.js",
    		"src": "resources/js/app.js",
    		"isEntry": true
    	},
    	"resources/css/app.css": {
    		"file": "assets/app.9fa9f508.css",
    		"src": "resources/css/app.css",
    		"isEntry": true
    	}
    }

    Donde se indica, por ejemplo, que cuando se haga referencia a resources/js/app.js se llame a assets/app.ab93cf8a.js