DEV Community

Fabio Sanchez
Fabio Sanchez

Posted on

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
Enter fullscreen mode Exit fullscreen mode

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",
  ],
},
Enter fullscreen mode Exit fullscreen mode

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");
Enter fullscreen mode Exit fullscreen mode

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",
    }),
  ],
Enter fullscreen mode Exit fullscreen mode

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",
    }),
  ],
};

Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

Probando los estilos.

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

npm run start
Enter fullscreen mode Exit fullscreen mode

Hola Mundo

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
Enter fullscreen mode Exit fullscreen mode

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]' },
    },
  ],
},
Enter fullscreen mode Exit fullscreen mode

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",
    }),
  ],
};

Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

Probando la importación de imágenes

Ahora solo debemos correr de nuevo el servidor de desarrollo.

npm run start
Enter fullscreen mode Exit fullscreen mode

React e imagenes

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.

Top comments (1)

Collapse
 
mauro_jutzutz profile image
Mauro Jutzutz Sepet

Excelente Tutorial Fabio