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.
Introducción
Conceptos esenciales
Uso práctico
No te pierdas ninguna novedad
Participa en la Comunidad Escuela Vue
