Configuración de Webpack en Proyecto React con Babel y JSX

Contenido del curso

Introducción a Webpack

Proyecto inicial

Loaders y Plugins en Webpack

Deploy del proyecto

Herramientas de desarrollo complementarias

Integración básica de React.js

Próximos pasos

28
Configuración y Uso de Webpack con React
00:48 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:007:04

Configuración de Webpack en Proyecto React con Babel y JSX

Curso de Webpack

Clase 23 de 28

Clase 23 / 28

Recursos

¿Cómo configurar Babel en un proyecto React?

Una parte fundamental al comenzar un proyecto en React es configurar Babel. Esta herramienta te permite convertir código JavaScript moderno en una versión compatible con navegadores más antiguos, lo cual es esencial para asegurar la funcionalidad de tu proyecto en diversos entornos. Aquí te mostramos cómo hacerlo paso a paso.

Instalación de Babel

Para iniciar, necesitamos instalar Babel en nuestro entorno de desarrollo. Esto se hace a través del gestor de paquetes npm, utilizando los siguientes comandos:

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

@babel/core: El núcleo de Babel.
@babel/preset-env: Permitirá usar las características modernas de JavaScript.
@babel/preset-react: Específico para entender la sintaxis JSX de React.
babel-loader: Integra Babel con Webpack.

Configuración de Babel

Una vez instaladas las dependencias, creamos un archivo de configuración para Babel. Este archivo se llama .babelrc y contiene las instrucciones sobre cómo Babel debe procesar nuestros archivos.

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

Estos presets permiten que Babel compile las últimas versiones de JavaScript y JSX, asegurando compatibilidad con React en navegadores antiguos.

¿Cómo integrar Webpack en el proyecto?

Webpack es una herramienta para empaquetar módulos, y es crucial para un desarrollo eficiente de aplicaciones React. Vamos a configurarlo para trabajar conjuntamente con Babel.

Instalación de Webpack

Instalamos Webpack y algunas de sus herramientas adicionales:

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

webpack: El propio empaquetador de módulos.
webpack-cli: Herramientas de línea de comandos para ejecutar Webpack.
webpack-dev-server: Proporciona un servidor local para desarrollo en tiempo real.

Creación del archivo de configuración para Webpack

El siguiente paso es crear un archivo de configuración llamado webpack.config.js. Aquí se definen cómo se debe comportar Webpack en nuestro proyecto.

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'
        }
      }
    ]
  },
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 3000
  }
};

Componentes clave en la configuración de Webpack

Entry: Especifica el punto de entrada para el proyecto, generalmente el archivo principal de nuestro proyecto.
Output: Define dónde y cómo se generará el output final.
Resolve: Indica las extensiones que Webpack debe considerar al importar módulos.
Module/Rules: Define cómo se deben procesar los archivos. Usamos babel-loader para transcribir nuestros archivos de React/JavaScript.
DevServer: Configuración para el servidor de desarrollo, especificando el puerto y la compresión.

Estos pasos básicos te preparan para desarrollar una aplicación React utilizando Webpack y Babel. A medida que avanza, puedes agregar más plugins y configuraciones para optimizar o personalizar tu flujo de trabajo. ¡Sigue explorando y aprendiendo para llevar tus proyectos al siguiente nivel!

Juan Pablo Jimenez

Hace 5 años

23.-Configuración de Webpack 5 para React.js

. Añadiremos webpack para poder preparar el proyecto y mandarlo a prod.

Vamos a repetir muchos de los pasos que hicimos anteriormente:

Instalaremos las dependencias:

npm install @babel/core @babel/preset-env @babel/preset-react babel-loader -D

Vamos a ir creando nuestros recursos: configuraciones:

//Creamos .babelrc y añadimos la estructura
{ //Para poder compilar
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ]
}

Instalamos webpack para el proyecto con:

npm install webpack webpack-cli webpack-dev-server -D

Creamos el archivo de configuración y añadimos las configuraciones correspondientes:

const path = require("path");

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

  resolve: {
    //Extensiones que vamos a trabajar
    extensions: [".js", ".jsx"],
  },

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

  devServer: {
    contentBase: path.join(__dirname, "dist"),
    compress: true,
    port: 3006,
  },
};

Comentarios (30)30 comentarios

Fernando Quinteros Gutierrez

Hace 6 años

Manuel Alejandro Blanco Lamas

David Alejandro García Graterón

Obed Paz

Jeffer Steven Nuñez Aragon

Rony Porraz Vargas

Edgar Lopez Arroyo

Max Andy Diaz Neyra

Ivan Andres Diaz Lopez

Irving Juárez

Rodrigo Ramos Xochiteotzin

Hace 4 años

David Hereira

Ariel Batista

Armando Chindoy

Nilson Diaz

Joel Eduardo Sánchez Herrera

Luis Eduardo

Reinaldo Mendoza

Oscar Fuentes Esteves

LUIS ISAZA

Lucas Aristizábal

Jairo Alberto Perez Guerrero

Francisco Ponce

Luis Lira

Sebastian Meneses

Héctor Eduardo López Carballo

Farid Ivanir Escate Picon

Sura Naileth Cedeño Lopez

Team Platzi

Kevin Salazar

SANDRO SIMON

Juan Carlos Montilla Sánchez

bruno guerra solano

Daniel Rodrigo Valdivieso Merino

Profesor

Paolo Carrion

Oscar Adrián Martínez Cavazos

César Palma

Introducción a Webpack

Curso Avanzado de Webpack para Producción Web

Configuración y uso de Webpack para proyectos JavaScript modernos

Proyecto inicial

Configuración y Uso de Webpack en Proyectos JavaScript

Optimización de Proyectos Web con Webpack para Producción

Configuración básica de Webpack para proyectos JavaScript

Loaders y Plugins en Webpack

Integración de Babel y Webpack para compatibilidad JavaScript

Configuración de HTML-webpack-plugin en Webpack

Configuración de Webpack para CSS y Preprocesadores

Uso de Copy Webpack Plugin para Mover Archivos en Proyectos Node.js

Importación de Imágenes con Webpack Asset Module

Optimización de Fuentes Locales con Webpack

Optimización de Proyectos con Webpack: Minificación y Hashing

Alias en Webpack: Simplifica la Importación de Módulos

Deploy del proyecto

Variables de Entorno en Webpack para Proyectos Seguros

Configuración de Webpack para Modo Desarrollo

Configuración de Webpack para Producción y Limpieza de Builds

Activar Watch Mode en Webpack para Desarrollo y Producción

Despliegue de Proyectos Web con Netlify y GitHub

Herramientas de desarrollo complementarias

Configuración de Webpack Dev Server para Desarrollo Local

Análisis de Dependencias con WebPath Bundle Analyzer

Uso de Source Maps en Webpack para Depuración de Código

Integración básica de React.js

Configuración de Webpack y React desde Cero para Producción

Configuración de Webpack en Proyecto React con Babel y JSX

Configuración de Webpack para Proyectos HTML y Servidor Local

Configurar CSS y SaaS en React con Webpack

Configuración de Webpack para Producción en React

Despliegue de Aplicaciones React en Netlify

Próximos pasos

Configuración y Uso de Webpack con React

Configuración de Webpack en Proyecto React con Babel y JSX