En la primera conferencia de la Laracon 2017 que se encuentra celebrándose en el día de hoy, Jeffrey Way nos habla sobre Webpack y Laravel Mix. Conoce algunos de los temas de los que habló:
Webpack
Gulp nos permite solamente automatizar tareas, mientras que Webpack se encarga de manipular todas las dependencias de nuestro proyecto. Algunos features interesantes de Webpack:
Entries y Output: se refiere a los archivos que contienen el código fuente de nuestra aplicación, ejemplo assets/js/app.js, en ese archivo escribimos la lógica y una vez que se compile dicha entrada generará un output que será el que incluiremos finalmente en la vista, ejemplo : public/js/app.{version}.js
Output: nos permite definir donde y cómo va a ser la salida de nuestros “bundles” y demás “assets” de nuestra aplicación.
Tree shaking: nos permite incluir libraries completos, pero a la final conservar únicamente los métodos que estamos utilizando. Por ejemplo incluir todo lodash pero a la final incluir sólo uno o dos métodos en nuestro javascript para producción.
Loaders: Le indica a Webpack cómo tratar archivos.
Webpack asume que todas las dependencias / código son JavaScript a menos que se indique que tipo de archivo es por medio de un “loader”. Ejemplo, css-loader, style-loader, sass-loader, file-loader, etc.
El file-loader se usa para trabajar con fuentes, imágenes, archivos (svg, jpg, eot, woff. Etc)
Compilar ES2015: Con Webpack es posible transformar ES2015 a una versión de JavaScript que pueda ser interpretada por cualquier navegador moderno, utilizando Babel.
Minificar: con Webpack es posible minificar el código como una manera de optimizar tu aplicación.
Plugins: los plugins son como la espina dorsal de Webpack, Webpack en sí está construido con el mismo sistema de plugins.
Compilar Sass: sass-loader. El workflow de la compilación de archivos sass en webpack para convertir sass en estilos es el siguiente : sass-loader > css-loader > style-loader.
Entornos: desarrollo vs producción: Es posible manejar diferentes entornos con Webpack, por ejemplo desarrollo donde queremos compilar rápido sin minificar, manteniendo así los comentarios del código, etc. para poder depurarlo, etc. y producción donde queremos generar archivos minificados (removiendo comentarios, espacios en blanco etc.) para poder servir archivos más pequeños y optimizados para los usuarios finales de nuestro proyecto.
NODE_ENV=production webpack
Plugin Extract: este plugin nos permite extraer código de un tipo a un archivo, por ejemplo es posible extraer todo el código de CSS (o Sass, Scss) a un archivo dedicado (por ejemplo como main.css)
Laravel Mix
Permite extraer la complejidad de Webpack y convertirla en una interfaz fluida y fácil de usar para todos. Aprende más sobre Laravel Mix
mix.js(‘resources/assets/js/app.js’, ‘public/js’) .sass(‘resources/assets/sass/app.scss’, ‘public/css’)
Mix está hecho para el 80% de los casos, si necesitas procesos más específicos debes aprender y usar Webpack. http://webpackcasts.com
Mix soporta componentes de Vue.js. Puedes aprender más sobre Vue con nuestro Curso de Vue 2 Pero también puedes usar Mix con React y otros libraries.
Extract te permite separar algunos componentes (como librerias) en una carpeta vendor separada del módulo compilado. Con Mix es muy fácil extraer archivos puntuales:
mix.js(‘resources/assets/js/app.js’, ‘public/js’)
.extract([‘jquery’, ‘vue’]);
Puedes aprender más sobre Mix en nuestro Curso de novedades de Laravel 5.4
Versión: al igual que Laravel Elixir, podemos versionar los assets compilados con Mix, la idea es que se genere un nombre de archivo único cada vez que se compilan los assets, de esta forma nos aseguramos de ver los últimos cambios en el navegador y no una vieja versión almacenada en cache.
Mover archivos: Webpack permite mover assets y archivos de tu directorio privado (por ejemplo “resources”) hasta tu directorio público (por ejemplo “public”) y cambiar la ruta de tus archivos de manera de que funcione de forma correcta en el navegador.
Es posible desactivar esta opción con Laravel Mix con processCssUrls: false
mix.options({
processCssUrls: false
});
ES2015
Una vez que comenzamos a utilizar Webpack / Laravel Mix, podemos comenzar a utilizar los nuevos features y sintaxis de ES2015, con ello podemos simplificar los llamados a nuestras funciones. Algunos ejemplos:
Arrow Functions
Por ejemplo:
family.filter(person => person.age > 18);
En vez de:
family.filter(function (person) {
person.age > 18;
});
Concatenación
let file = `${output.name}.[hash].${output.ext}`;
En vez de:
var file = output.name + ‘.[hash].’ + output.ext;
Más sobre Laracon Online
Durante el día de hoy te mantendremos al tanto de lo que se esté presentando en las diferentes conferencias:
- Jeffrey Way “Laravel Mix.”
- Evan You “Something Vue.js 2.2+ related”
- Rachel Andrew “CSS Grid and Flexbox.”
- Adam Wathan “You Might Not Need a Mocking Framework.”
- Taylor Otwell “Laravel 5.4 internals walkthrough.”
- Nick Canzoneri “What developers should know about email.”
- Jason McCreary “You don’t know Git.”
- Matt Stauffer “Mastering the Illuminate Container.”
Esperamos lo disfrutes tanto como nosotros.
Regístrate hoy en Styde y obtén acceso a todo nuestro contenido.
