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: 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.