Procesar CSS e imágenes

• Como recordarás en la anterior lección comenzamos a procesar las dependencias de nuestro proyecto con Webpack. Más concretamente, nuestro código JavaScript de autor.
• Sin embargo, si abrimos la compilación en un navegador verás que los estilos CSS no se están cargando. En el termina figura un error. Si abrimos el código fuente de la página podrás ver que nuestro archivo CSS es inalcanzable. Vamos a usar Webpack para procesarlo.
• De nuevo, la búsqueda es tu amiga. Vamos a dar un primer paso con los loaders css-loader para interpretar nuestro código CSS y style-loader para inyectarlo en el DOM a través de JavaScript.
• Importante, recuerda que la carga de loaders se expresa de derecha a izquierda.
• Primero, instalamos los loaders con npm install --save-dev css-loader style-loader.
• Y ahora los añadimos a nuestra configuración de Webpack, para poner en marcha de nuevo el proceso build.

    module: {
      rules: [
        {
          test: /\.css$/,
          use: ["style-loader", "css-loader"]
        },
      ]
    },

• Recuerda que css-loader necesita una sentencia que importe un documento CSS, así que vamos a añadirla en nuestro archivo fuente main.js. Además debemos comentar nuestra referencia al documento CSS en index.html, igual que hicimos al tratar con JavaScript.

    ...
    import CSS from "../css/main.css";
    ...

• Verás que nos encontramos un error. css-loader se ha encontrado con algo que no sabe cómo manejar: una imagen. Hay que explicarle a Webpack cómo entender ese "idioma".
• Ya sea a través de elementos img o en documentos CSS, debemos usar url-loader (como en una lección anterior ) para añadir las imágenes inline en base-64 o file-loader para añadirlas como archivos.
• Primero instalamos file-loader con npm install file-loader --save-dev y luego actualizamos la configuración de Webpack.

    ...
    {
      test: /\.(png|svg|jpg|jpeg|gif)$/,
      use: ["file-loader"]
    }
    ...

• Ahora, el proceso funciona y podemos abrir /dist para comprobar como los estilos están cargados.
• ¿Qué pasa si queremos un archivo CSS independiente?. Es decir, que JavaScript no inyecte en el DOM nuestros estilos. Podemos usar el MiniCSExtractPlugin.
• Por supuesto debemos instalarlo con npm install --save-dev mini-css-extract-plugin, requerirlo en nuestra configuración, instanciar una nueva versión del plugin y hacer uso del mismo junto con css-loader, eliminando la llamada a style-loader que era quien se encargaba de inyectar nuestro CSS en el DOM.