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

No te pierdas ninguna novedad

Escuela Vue en Twitter

Participa en la Comunidad Escuela Vue

Comunidad Escuela Vue