Forem: Fabio Sanchez

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

Fabio Sanchez — Tue, 07 Jul 2020 03:06:00 +0000

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.

Configurar Webpack & React Parte 5 - 🖥 Modo desarrollo y dev-server

Fabio Sanchez — Fri, 03 Jul 2020 01:27:22 +0000

En esta entrega veremos como generar un versión de nuestro código en modo desarrollo además de instalar un paquete llamado dev-server para correr nuestro proyecto junto un servidor local.

Modo desarrollo

En un tutorial anterior vimos como agregar un comando a nuestro package.json para generar nuestro bundle.js para producción, ahora añadiremos un comando para generar nuestro bundle.js en modo desarrollo, los archivos generados en modo desarrollo no vienen optimizados y la forma mas clara de darse cuenta es por el peso que tienen al no estar minificados, esto es bueno si tienes propósitos de debugueo mientras desarrollas.

Para eso necesitamos editar la sección de scripts de nuestro package.json y escribir lo siguiente "dev": "webpack --mode development" quedando un resultado como el siguiente.

{
  "name": "webpackreact",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode production",
    "dev": "webpack --mode development"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  },
  "devDependencies": {
    "@babel/core": "^7.10.3",
    "@babel/preset-env": "^7.10.3",
    "@babel/preset-react": "^7.10.1",
    "babel-loader": "^8.1.0",
    "html-loader": "^1.1.0",
    "html-webpack-plugin": "^4.3.0",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12"
  }
}

Para probar que todo ha ido bien solo es necesario correr nuestro nuevo comando

npm run dev

Como podemos observar en la siguiente imagen los tamaños de los archivos son mas grandes que cuando es en modo producción.

dev-server

Instalar dev-server es equivalente a tener un servidor local en donde puedes probar tu aplicación, para esto es necesario instalar el siguiente paquete.

npm install --save-dev webpack-dev-server

Una vez instalado el paquete procedemos a agregar el comando que nos permitirá iniciar el servidor local junto nuestro proyecto para esto debemos editar de nuevo el archivo package.json y agregar la siguiente linea "start": "webpack-dev-server --history-api-fallback --open --mode development" en la sección de scripts quedando un resultado como el siguiente.

{
  "name": "webpackreact",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode production",
    "dev": "webpack --mode development",
    "start": "webpack-dev-server --history-api-fallback --open --mode development"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  },
  "devDependencies": {
    "@babel/core": "^7.10.3",
    "@babel/preset-env": "^7.10.3",
    "@babel/preset-react": "^7.10.1",
    "babel-loader": "^8.1.0",
    "html-loader": "^1.1.0",
    "html-webpack-plugin": "^4.3.0",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  }
}

Como paso final solo nos queda probar nuestro nuevo comando

npm run start

El navegador se abrirá automáticamente y veremos algo como la siguiente imagen.

Despedida

Ahora que tenemos cubierto la forma de poder generar y visualizar nuestro proyecto procederemos a poner soporte de estilos e imágenes en la siguiente entrega.

Configurar Webpack & React Parte 4 - 🛠 Soporte html con Webpack

Fabio Sanchez — Thu, 02 Jul 2020 21:40:15 +0000

En la entrega anterior creamos nuestro código fuente inicial, ahora en esta entrega toca poner soporte a los archivos html para poder visualizar los componentes que desarrollemos.

Html

Como primer paso debemos instalar los paquetes que necesitamos para poder tratar los archivos html

npm install --save-dev html-webpack-plugin html-loader

html-webpack-plugin

Este plugin sirve para que el bundle generado por webpack que en nuestro caso es bundle.js sea insertado en index.html por medio de la etiqueta <script type="text/javascript" src="bundle.js"></script>.

html-loader

Este plugin resuelve las importaciones de archivos .html por ejemplo import html from './file.html'; para poder exportarlas de acuerdo a la configuración que le pasemos el plugin, como por ejemplo que minifique el archivo.

Editando nuestro webpack.config.js

En este punto agregaremos el nuevo codigo en webpack.config.js para poder utilizar estos dos plugins.

Como primer paso requerimos html-webpack-plugin

const HtmlWebpackPlugin = require("html-webpack-plugin");

Como segundo paso agregamos una sección nueva llamada plugins en la configuración y dentro de ella escribiremos el uso de nuestro plugin indicándole donde se encuentra nuestro index.html creado en la entrega pasada.

module.exports = {
  ...
  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html",
      filename: "index.html",
    }),
  ],
  ...
};

Como tercer paso nos queda crear la regla para el uso de html-loader.

module.exports = {
  ...
  module: {
    rules: [
      ...
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader",
          },
        ],
      },
      ...
    ],
  },
  ...
};

Dando como resultado final el siguiente código

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-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",
          },
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html",
      filename: "index.html",
    }),
  ],
};

Probando la configuración nueva.

En este punto nos disponemos a probar la nueva configuración que agregamos.

npm run build

Ahora tenemos un archivo nuevo llamado index.html dentro de la carpeta dist, este archivo ya tiene la referencia a bundle.js.

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

Despedida

En la siguiente entrega añadiremos dos nuevos comandos uno para transpilar en modo desarrollo y otro para poder probar nuestro código en modo en vivo.

Configurar Webpack & React Parte 3 - 🛠 Transpilando js, jsx con Webpack

Fabio Sanchez — Thu, 02 Jul 2020 21:39:49 +0000

En esta entrega por fin empezaremos a escribir la configuración de webpack y para poder probarlo añadiremos un comando a nuestro package.json.

webpack.config.js

Webpack necesita un archivo de configuración en el cual por medio de javascript escribiremos como debe utilizar los paquetes previamente instalados.

Para eso en la carpeta raíz de nuestro proyecto debemos crear el archivo webpack.config.js

Quedando un árbol de archivos y directorios como el siguiente

.
├── public
│   └── index.html
├── src
│   ├── components
│   │   └── HolaMundo.jsx
│   └── index.js
├── .babelrc
├── package-lock.json
├── package.json
└── webpack.config.js

Build

Como siguiente paso debemos indicarle a NPM un nuevo comando para compilar nuestro proyecto con webpack, para eso debemos editar nuestro package.json y agregar la siguiente linea "build": "webpack --mode production" en la sección de scripts como se ve abajo.

El comando en cuestión le dirá a webpack que genere nuestro proyecto en modo producción.

{
  "name": "webpackreact",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  },
  "devDependencies": {
    "@babel/core": "^7.10.3",
    "@babel/preset-env": "^7.10.3",
    "@babel/preset-react": "^7.10.1",
    "babel-loader": "^8.1.0",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12"
  }
}

Manejando archivos .js y .jsx

Previamente ya habíamos instalado React y Babel, ahora toca decirle a webpack que lo utilice para convertir nuestro código a un javascript que el navegador lo pueda entender.

Para eso debemos editar el archivo webpack.config.js y colocar las siguientes lineas.

const path = require("path");

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

Las partes importantes del código anterior son las siguientes

entry

module.exports = {
  ...
  entry: "./src/index.js",
  ...
}

Le dice a webpack cual es el archivo de entrada que tiene el código fuente de nuestra aplicación react y sus importaciones.

output

module.exports = {
  ...
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  ...
}

Le dice a webpack en donde se generara el transpilado de nuestra aplicación react, en este caso es en la carpeta dist y con el nombre bundle.js

rules

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
    ],
  },
  ...
}

En la sección de rules va la configuración con respecto a las extensiones que queremos tratar, en este caso particular, estamos diciendo en test: que serán los archivos con extensión js y jsx, en exclude que vamos a excluir los que están en la carpeta node_modules y en use usaremos babel-loader para tratarlos.

Probando nuestra configuración webpack

Solo tenemos que correr el nuevo comando que agregamos previamente en package.json

$ npm run build

Como nos podemos dar cuenta, tenemos una nueva carpeta llamada dist y dentro de ella un archivo llamada bundle.js que es nuestro archivo final para producción.

El nuevo árbol de directorios y archivos sera como el siguiente.

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

Despedida

Por ahora tenemos la capacidad de transpilar código javascript pero aun no tenemos un archivo html para visualizarlo, en la siguiente entrega añadiremos soporte para archivos html.

Configurar Webpack & React Parte 2 - 🗒 Código fuente inicial.

Fabio Sanchez — Thu, 02 Jul 2020 21:39:19 +0000

En la entrega anterior creamos nuestro proyecto e instalamos las dependencias principales, en este tutorial nos enfocaremos en crear el código fuente inicial de React y en el siguiente tutorial lo probaremos con webpack.

Este código fuente inicial será modificando en futuros tutoriales pero por ahora es suficiente como para entender como trabaja webpack.

index.html

Dentro de la carpeta public crearemos un archivo index.html, este archivo html será donde nuestro transpilado de React y sus componentes se renderizaran, mas concretamente en el div con id app.

El archivo debe tener el siguiente contenido.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hola react</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

Árbol de archivos y directorios:

.
├── public
│   └── index.html
├── src
├── .babelrc
├── package-lock.json
└── package.json

HolaMundo.jsx

Dentro de la carpeta src crearemos una subcarpeta llamada components y dentro de esta un archivo llamado HolaMundo.jsx que será nuestro primer componente de prueba y tendrá el siguiente contenido.

import React from "react";

const HolaMundo = () => {
  return <h1>Hola mundo</h1>;
};

export default HolaMundo;

Árbol de archivos y directorios:

.
├── public
│   └── index.html
├── src
│   └── components
│       └── HolaMundo.jsx
├── .babelrc
├── package-lock.json
└── package.json

index.js

Nos situamos de nuevo en la carpeta de src y creamos un archivo llamado index.js que será el punto de entrada principal para nuestra configuración de webpack.

import React from "react";
import ReactDOM from "react-dom";
import HolaMundo from "./components/HolaMundo";

ReactDOM.render(<HolaMundo />, document.getElementById("app"));

Como observación, podemos ver que tiene importado nuestro primer componente de ejemplo HolaMundo.jsx.

Árbol de archivos y directorios:

.
├── public
│   └── index.html
├── src
│   ├── components
│   │   └── HolaMundo.jsx
│   └── index.js
├── .babelrc
├── package-lock.json
└── package.json

Despedida

En la siguiente entrega empezaremos a crear la configuración de webpack y añadiremos soporte para archivos js y jsx

Configurar Webpack & React Parte 1 - 📦 Dependencias y directorios iniciales

Fabio Sanchez — Thu, 02 Jul 2020 21:38:37 +0000

Uno de los retos que todo desarrollador React se propone vencer en algún momento de su aprendizaje es crear desde cero su propia configuración de Webpack para usar React y así dejar de lado todo el misterio que encierra create-react-app

Asumo que tienes cierta experiencia con JavaScript y que tienes instalado Node & NPM

Al momento de escribir este tutorial estoy usando Node v14.4.0 y NPM 6.14.5.

📦 Dependencias y directorios iniciales

En esta sección cubriremos lo que va a ser la estructura del árbol de directorios e instalaremos todas las dependencias que necesitaremos para hacer funcionar nuestro proyecto

Inicializando el proyecto

Como paso inicial debemos crear la carpeta que alojara nuestro proyecto, en mi caso le llamare webpackreact pero puedes sentirte libre de llamarle como mas te guste.

Como siguiente paso es crear dos sub carpetas llamadas src y public

.
├── public
└── src

Una vez que tengamos los directorios y estando ubicados en webpackreact procedemos a iniciar nuestro proyecto con npm.

$ npm init -y

Como resultado debemos tener un archivo nuevo llamado package.json con el siguiente contenido. Este archivo es el más importante ya que ahí se agregarán las dependencias que son los paquetes que se utilizaran para desarrollar con React.

{
  "name": "webpackreact",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Debes tener un resultado final como el siguiente árbol de directorios.

.
├── public
├── src
└── package.json

Instalando dependencias

Las dependencias las vamos a instalar con NPM, pero antes debo aclararte que significa las dos banderas que acompañan al comando de instalación:

--save Esta bandera se utiliza para indicar que el paquete a instalar es requerido para que el programa pueda funcionar cuando lo mandes a producción.

2.- --save-dev Esta bandera indica que el paquete a instalar solo se usa cuando estas desarrollando tu aplicación y no es necesario que este presente cuando tu aplicación este en producción.

Instalando React

Contiene todo lo relacionado a React para que podamos desarrollar.

$ npm install --save react react-dom

Instalando Babel

Los navegadores no siempre están a la par con las nuevas características de JavaScript que salen cada año, por eso Babel nos permite que el código JavaScript moderno de ultima generación que vamos escribir para nuestra aplicación React sea transformado en código estándar que cualquier navegador pueda entender.

$ npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader

Seguido debemos crear un archivo de configuración de babel .babelrc en donde debemos indicarle que "Presets" debe utilizar.

Los "Presets" son un conjunto de plugins que le dice a babel como debe hacer las cosas, en nuestro caso solo utilizaremos dos que es present-env y preset-react pero puedes ver la lista en la siguiente enlace https://babeljs.io/docs/en/presets

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

Al final debemos tener algo como el siguiente árbol de directorios

.
├── public
├── src
├── .babelrc
├── package-lock.json
└── package.json

Instalando Webpack

Webpack es el orquestador ya que el se encargara de unir y darle sentido a todo lo que estamos instalando.

npm install --save-dev webpack webpack-cli

Despedida

Ahora que tenemos la configuración inicial, procederemos en el siguiente parte a crear nuestro código demo.