Cómo usar jquery y vanilla js en Laravel con WebPack

Laravel por defecto usa webpack para administrar las librerias del front tales como React, VueJs, Angular, Jquery, etc. ¿Pero que pasa cuando queremos usar funciones de vanilla js? Probablemente nos encontremos un mensaje indicando que la función no está definida. Por fortuna, Laravel usa algo que se llama LaravelMix.

LaravelMix nos ayuda a mezclar y minificar todos nuestros archivos JS. Entonces, para poder usar Jquery y Vanilla JS en Laravel nuestro archivo webpack.mix.js debe lucir de la siguiente manera:

const mix = require('laravel-mix');
.

.

. 

mix.scripts(['resources/js/models/invoiceModel.js'], 'public/js/models.js')
mix.copy('node_modules/jquery/dist/jquery.min.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

Aquí lo importante es la instrucción mix.scripts. Dicha función recibe un arreglo con los paths de nuestros archivos JS para mezclarlos y minificarlos en la ruta que se le indica en el segundo parámetor.

Por ejemplo, mi archivo invoiceModel.js contiene una función así:

function hello(){
    alert("hello")
}

Laravel Mix toma ese archivo como un JS no compilable y lo mezcla en un archivo model.js:













Y para Jquery, bueno, aquí solo hace una copia del path donde está jquery instalado, en este caso la instalación se hizo usando NPM, por eso está en node_modules. De esa manera ya se pueden usar todas las funciones de jquery:






 Bueno, eso es todo. Si requieren más detalle dejen sus comentarios para aclarar dudas vía correo o skype. Saludos.