- 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:
loaders
y plugins
. 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
use
y test
, dentro de la propiedad rules
del objetomodule
.
module: {
rules: [
{
test: REGEXP,
use: "some-loader" // ejemplo babel-loader
}
]
}
test
indica 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
node
que debes instalar.
- Vamos a usar
file-loader
para 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-loader
transforma 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 usa file-loader
como fallback. Perfecto para imágenes grandes ya que nunca querrás hacer inline de una imagen FullHD, por ejemplo.