Por: Juan Andrés Núñez
Juan Andrés Núñez - juanwmedia

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.

  • 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.
Descarga la chuleta de Vue 3 gratis

Descarga la chuleta de Vue 3

Para tener todas las novedades de Vue 3 al alcance de la mano 🔥️

DESCARGA GRATIS LA CHULETA AHORA 💾

No te pierdas ninguna novedad

Escuela Vue en Twitter

Participa en la Comunidad Escuela Vue

Comunidad Escuela Vue