Seguir
( 1 Seguidores)
X

Seguir

E-mail : *

Laravel mix nos proporciona todo lo necesario para hacer uso del compilador Webpack para nuestra aplicación en Laravel.

Hoy quiero enseñarte como hacer la configuración básica para hacer uso de Webpack.

Para ello haremos una instalación limpia de laravel 5.5.


Vamos a necesitar Vue y el viejo y confiable Bootstrap; Los descargamos.

Nota: Lo puedes hacer con el framework css ó framework´s javascript de tu preferencia.

En nuestro proyecto, vamos a la carpeta resource/assets , encontraremos dos carpetas (js y sass) las eliminamos, ya que vamos a usar los componentes Vue y Bootstrap que descargamos anteriormente.

En la carpeta resource/assets  creamos dos carpetas, CSS Y JS, alli guardaremos los componentes que descargamos, quedando asi:

 Ahora bien, en la mayoría de veces debemos personalizar el diseño de nuestro proyecto, por esto cree otro CSS llamado app.css, donde pondré mis estilos, adicional-mente a esto en la carpeta JS cree un archivo llamado app.js que al igual que el css servirá para poner nuestros scripts.

 



Antes que nada revisamos el archivo package.json, deberia estar de la siguiente manera:

 

Nos aseguramos que dentro de “devDependencies” esta el componente laravel-mix.



Nota: Te preguntaras porque hay varios componentes dentro de “devDependencies”, package.json tiene una función muy parecida a composer.json, ya que allí se declaran los componentes que usamos en nuestro proyecto, ahora bien, en este ejemplo NO vamos a trabajar de esta forma, lo vamos hacer manual.

Ahora vamos a configurar el modo de compilación de laravel mix, para ello vamos al archivo llamado webpack.mix.js , nos mostrara esto:

Modificamos el archivo, llamando los componentes ubicados en las carpetas CSS y JS en resource/assets , quedaria asi:

 

Allí tenemos dos funciones llamadas por mix, las cuales albergan un array con los componentes que elegimos para JS y CSS, y se compilaran en la carpeta public, en la ubicación descrita.

El siguiente paso es instalar las dependecias(laravel-mix), para esto necesitaremos tener instalado NODE.JS , y ejecutamos el siguiente comando npm install, esto tardara un poco depende de tu conexión a Internet.

Luego de instalar las dependencias, procedemos a compilar nuestros archivos, aplicaremos el siguiente comando npm run dev.

Nos da un SUCCESS, con esto habremos compilado con éxito con ayuda de webpack, revisamos los archivos resultados:

Allí están, tal cual como los definimos en nuestro webpack, ya lo podremos usar en nuestro proyecto.



Si te gusto este tutorial básico, compártelo, si tienes preguntas déjanos un comentario ala brevedad te contestamos.

No olvide seguirnos en facebook.

Suscribete para que te llegue el contenido!

Estoy trabajando a diario, asi que el contenido te llegara pronto.

Te has suscrito correctamente!