El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Compilación Básica de Webpack

Siguiente ►
►

En esta sección, aprenderemos cómo realizar una compilación básica con Webpack. Este proceso es fundamental para entender cómo Webpack transforma y empaqueta tu código fuente en archivos que pueden ser utilizados en un entorno de producción.

Objetivos

  • Configurar un proyecto básico de Webpack.
  • Crear un archivo de configuración mínimo.
  • Ejecutar una compilación básica.
  • Entender el resultado de la compilación.

Requisitos Previos

  • Tener Node.js y npm instalados en tu sistema.
  • Conocimientos básicos de JavaScript y npm.

Paso 1: Configuración del Proyecto

1.1 Crear un Directorio de Proyecto

Primero, crea un nuevo directorio para tu proyecto y navega dentro de él:

mkdir webpack-basic-build
cd webpack-basic-build

1.2 Inicializar un Proyecto npm

Inicializa un nuevo proyecto npm ejecutando el siguiente comando y siguiendo las instrucciones:

npm init -y

Esto creará un archivo package.json con la configuración predeterminada.

1.3 Instalar Webpack y Webpack CLI

Instala Webpack y Webpack CLI como dependencias de desarrollo:

npm install --save-dev webpack webpack-cli

Paso 2: Crear la Estructura del Proyecto

2.1 Crear Archivos y Directorios Necesarios

Crea los siguientes archivos y directorios dentro de tu proyecto:

mkdir src
touch src/index.js
touch webpack.config.js
  • src/index.js: Este será el punto de entrada de tu aplicación.
  • webpack.config.js: Este será el archivo de configuración de Webpack.

Paso 3: Configurar Webpack

3.1 Editar webpack.config.js

Abre webpack.config.js y añade la siguiente configuración mínima:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};
  • entry: Define el punto de entrada de tu aplicación.
  • output: Define el nombre del archivo de salida (bundle.js) y el directorio de salida (dist).

Paso 4: Escribir Código Fuente

4.1 Editar src/index.js

Abre src/index.js y añade un simple mensaje de consola:

console.log('Hello, Webpack!');

Paso 5: Ejecutar la Compilación

5.1 Añadir un Script de Compilación en package.json

Abre package.json y añade el siguiente script en la sección "scripts":

"scripts": {
  "build": "webpack"
}

5.2 Ejecutar el Script de Compilación

Ejecuta el siguiente comando para compilar tu proyecto:

npm run build

Paso 6: Verificar el Resultado

6.1 Verificar la Salida

Después de ejecutar el comando de compilación, deberías ver un nuevo directorio dist con un archivo bundle.js dentro de él. Este archivo contiene el código empaquetado de tu aplicación.

6.2 Ejecutar el Archivo Empaquetado

Para verificar que todo funciona correctamente, puedes abrir el archivo dist/bundle.js en un navegador o ejecutar el siguiente comando en la terminal:

node dist/bundle.js

Deberías ver el mensaje Hello, Webpack! en la consola.

Resumen

En esta sección, hemos cubierto los pasos básicos para configurar y ejecutar una compilación con Webpack. Hemos aprendido a:

  • Configurar un proyecto npm.
  • Instalar Webpack y Webpack CLI.
  • Crear una estructura de proyecto básica.
  • Configurar Webpack con un archivo de configuración mínimo.
  • Ejecutar una compilación y verificar el resultado.

Con estos conocimientos, estás listo para explorar configuraciones más avanzadas y optimizar tu flujo de trabajo con Webpack. En la siguiente sección, profundizaremos en los conceptos básicos de Webpack, como los puntos de entrada, la configuración de salida, los loaders y los plugins.

◄ Anterior
◄
Siguiente ►
►
El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados