Especialista en tecnologías Web. Me dedico a enseñar desarrollo Web moderno a cualquier persona (físicamente en clase y a través de Internet) desde una perspectiva holística: teniendo en cuenta las competencias técnicas necesarias, junto a las habilidades personales o soft skills. Tienes más información en mi Web.
Aprende Webpack desde cero
Webpack loaders, cómo funcionan
- Además de dónde entrar y cómo salir (algo que ya hemos especificado), no hemos utilizado ninguna de las característica de Webpack.
- Recuerda la misión de Webpack: gestionar cada recurso de tu aplicación y añadirlo a su correspondiente bundle a través del dependency graph.
- Para gestionar los recursos de cada proyecto Webpack dispone de dos herramientas:
loadersyplugins. Veamos qué son los loaders Webpack. - Webpack procesa cada recurso y lo trata como un módulo para que pueda ser añadido al gráfico de dependencias.
- Por defecto, Webpack sólo entiende JavaScript y JSON. Los loaders permiten a Webpack procesar otro tipo de archivos y recursos para convertirlos en módulos que puedan ser consumidos en tu aplicacion.
- Suena muy extraño tratar un archivo CSS o una imagen como un módulo JavaScript, pero así es como Webpack crea y mantiene su gráfico de dependencias.
- Hay cientos de loaders para cientos de escenarios. Para comenzar a utilizarlos, las dos propiedades de configuración imprescindibles son
useytest, dentro de la propiedadrulesdel objetomodule.
module: {
rules: [
{
test: REGEXP,
use: "some-loader" // ejemplo babel-loader
}
]
}
testindica a Webpack, que antes de añadirla al dependency graph hay que transformarla con un loader. Usa una expresión regular para buscar un patrón y procesarlo.- Podemos aplicar una serie de transformaciones utilizando varios loaders para un tipo de recurso.
...
test: /\.scss$/,
use: [ // se procesan de derecha a izquierda
"style-loader", // aplica los estilos via DOM
"css-loader", // interpreta CSS
"sass-loader", // procesa SASS
]
- Usaremos los loaders más comunes durante el curso, pero ahora para ponerlos a prueba vamos a añadir una imagen a nuestro documento principal.
import blackcat from "./black-cat.jpg";
const img = document.createElement("img");
img.src = blackcat;
- Webpack intenta tratar esa dependencia como módulo pero no sabe procesarla. No puede entenderla. Un loader le añadirá es capacidad.
- ¿De dónde narices salen los loaders?. Las strings que usamos serán automáticamente resueltas a módulos
nodeque debes instalar. - Vamos a usar
file-loaderpara procesar esa imagen.
module: {
rules: [
{
test: /\.jpg$/,
use: "file-loader"
}
]
}
- Los loaders pueden recibir diferentes opciones en base a diferentes escenarios.
- Por ejemplo el loader
url-loadertransforma recursos a Base64. Genial para establecer imágenes como inline en tus archivos CSS o HTML.
module: {
rules: [
{
test: /\.jpg$/,
{loader: "url-loader", options: {limit: 1000}}
}
]
}
- Sin embargo podemos elegir un tamaño mínimo o máximo para hacerlo. Es una opción del loader. Todos disponen de una sintaxis de objeto y propiedad
options. Si supera ese rango entonces usafile-loadercomo fallback. Perfecto para imágenes grandes ya que nunca querrás hacer inline de una imagen FullHD, por ejemplo.
Descarga la chuleta de Vue 3
Para tener todas las novedades de Vue 3 al alcance de la mano 🔥️
DESCARGA GRATIS LA CHULETA AHORA 💾Introducción
Conceptos esenciales
Uso práctico
No te pierdas ninguna novedad
Participa en la Comunidad Escuela Vue
