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.
Top comments (1)
Excelente Tutorial Fabio