Configurar Webpack & React Parte 6 - 🌄 Soporte de estilos e imágenes.

En esta entrega vamos a instalar los paquetes necesarios para que webpack sepa como tratar estilos e imágenes en nuestro proyecto de react.

Estilos

Nos disponemos a instalar los paquetes necesarios:

npm install --save-dev mini-css-extract-plugin css-loader node-sass sass-loader

node-sass

Esta librería transforma sass o scss a css, es usada por sass-loader.

sass-loader

Nos ayuda a cargar los archivos sass o scss y convertirlos a css, internamente usa node-sass para ello.

css-loader

Nos ayuda a resolver las importaciones del tipo import css from 'file.css'; que declaremos en nuestra aplicación de react.

mini-css-extract-plugin

Nos ayuda a guardar en disco los archivos css que fueron el resultado de ser tratados con los plugins descritos anteriormente.

Agregando el soporte de estilos a Webpack

Como paso siguiente debemos editar nuestro webpack.config.js para configurar los plugins

Añadiendo la nueva regla a webpack.config.js

Tenemos que añadir una nueva regla para que webpack pueda reconocer y transformar los archivos scss, css.

{
  test: /\.(s*)css$/,
  use: [
    { loader: MiniCssExtractPlugin.loader },
    "css-loader",
    "sass-loader",
  ],
},

Importando mini-css-extract-plugin

En la parte superior igual indicaremos que vamos a requerir mini-css-extract-plugin

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

Usando mini-css-extract-plugin

En la sección de scripts debemos agregar el uso de este nuevo plugin para poder exportar los css previamente convertidos.

  plugins: [
    ...
    new MiniCssExtractPlugin({
      filename: "assets/[name].css",
    }),
  ],

Todo junto

Teniendo como resultado el siguiente:

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  resolve: {
    extensions: [".js", ".jsx"],
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader",
          },
        ],
      },
      {
        test: /\.(s*)css$/,
        use: [
          { loader: MiniCssExtractPlugin.loader },
          "css-loader",
          "sass-loader",
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html",
      filename: "index.html",
    }),
    new MiniCssExtractPlugin({
      filename: "assets/[name].css",
    }),
  ],
};

Agregando un estilo

Dentro de src debemos crear un carpeta nueva llamada assets y dentro de esta una llamada styles. Seguido debemos crear un archivo llamado Main.scss.

Deberemos tener un árbol de archivos y directorios como el siguiente.

.
├── dist
│   ├── bundle.js
│   └── index.html
├── public
│   └── index.html
├── src
│   ├── assets
│   │   └── styles
│   │       └── Main.scss
│   ├── components
│   │   └── HolaMundo.jsx
│   └── index.js
├── .babelrc
├── package-lock.json
├── package.json
└── webpack.config.js

Main.scss

Solo debemos colocarle el siguiente contenido de prueba.

$background-color: #282c34;
$text-color: #fff;

* {
  margin: 0;
  padding: 0;
}
.container {
  background-color: $background-color;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: $text-color;
}

Importando Main.scss

Lo que debemos hacer es importar nuestros estilos en nuestro componente HolaMundo.jsx y hacerle una actualización para que tenga un div contenedor.

import React from "react";
import "../assets/styles/Main.scss";

const HolaMundo = () => {
  return (
    <div className="container">
      <h1>Hola mundo</h1>
    </div>
  );
};

export default HolaMundo;

Probando los estilos.

Como ultimo paso de esta sección solo debemos correr nuestro proyecto y ver si todo marcha bien.

npm run start

Imágenes

En el caso de las imágenes el procedimiento es un poco mas sencillo, lo primero es añadir el plugin file-loader de webpack.

npm install --save-dev file-loader

file-loader

Resuelve las importaciones de archivos y nos permite guardarlos, en este caso lo usaremos para que resuelva las imágenes.

Agregando el soporte de imágenes a Webpack

Como paso siguiente debemos editar nuestro webpack.config.js para configurar el loader.

Añadiendo la nueva regla

Tenemos que añadir una nueva regla para que webpack pueda reconocer los archivos png, jpe, jpeg, gif e indicarle donde debe guardarlos

{
  test: /\.(png|jpe?g|gif)$/i,
  use: [
    {
      loader: 'file-loader',
      options: { name: 'assets/[hash].[ext]' },
    },
  ],
},

Teniendo como resultado lo siguiente.

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  resolve: {
    extensions: [".js", ".jsx"],
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader",
          },
        ],
      },
      {
        test: /\.(s*)css$/,
        use: [
          { loader: MiniCssExtractPlugin.loader },
          "css-loader",
          "sass-loader",
        ],
      },
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: "file-loader",
            options: { name: "assets/[hash].[ext]" },
          },
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html",
      filename: "index.html",
    }),
    new MiniCssExtractPlugin({
      filename: "assets/[name].css",
    }),
  ],
};

Agregando una imagen

Ahora dentro de la carpeta assets debemos crear una carpeta llamada static en donde guardaremos nuestra imagen, en mi caso busque una de react en iconfinder y la guarde con el nombre de react.png.

Obtenemos un árbol de archivos y directorios como el siguiente.

.
├── dist
│   ├── bundle.js
│   └── index.html
├── public
│   └── index.html
├── src
│   ├── assets
│   │   ├── static
│   │   │   └── react.png
│   │   └── styles
│   │       └── Main.scss
│   ├── components
│   │   └── HolaMundo.jsx
│   └── index.js
├── .babelrc
├── package-lock.json
├── package.json
└── webpack.config.js

Importando la imagen.

A continuación debemos modificar de nuevo nuestro componente HolaMundo.jsx para importar la imagen, después agregar una etiqueta img para poder visualizarla.

import React from "react";
import "../assets/styles/Main.scss";
import reactImg from "../assets/static/react.png";

const HolaMundo = () => {
  return (
    <div className="container">
      <img src={reactImg} alt="imagen de react" />
      <h1>Hola mundo</h1>
    </div>
  );
};

export default HolaMundo;

Probando la importación de imágenes

Ahora solo debemos correr de nuevo el servidor de desarrollo.

npm run start

Despedida

Ahora ya tenemos soporte de estilos e imágenes, en la siguiente entrega daremos soporte de ESLint para tener mejores practicas de programación.

Comments

[Mauro Jutzutz Sepet]

Excelente Tutorial Fabio