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

Configuración de Salida

Siguiente ►
►

En este tema, aprenderemos cómo configurar la salida de Webpack, es decir, cómo y dónde se generarán los archivos compilados. La configuración de salida es crucial para asegurarnos de que nuestros archivos generados se ubiquen en el lugar correcto y tengan los nombres adecuados.

Conceptos Clave

  1. output.path: Define el directorio donde se guardarán los archivos generados.
  2. output.filename: Especifica el nombre del archivo de salida.
  3. output.publicPath: Define la URL pública desde la cual se servirán los archivos.
  4. output.clean: Limpia el directorio de salida antes de cada compilación.

Configuración Básica

output.path

El output.path es una ruta absoluta al directorio donde Webpack colocará todos los archivos generados. Es importante usar el módulo path de Node.js para manejar rutas de manera segura y consistente.

const path = require('path');

module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist')
  }
};

En este ejemplo, los archivos generados se guardarán en un directorio llamado dist en la raíz del proyecto.

output.filename

El output.filename define el nombre del archivo de salida. Puedes usar patrones para incluir variables como [name] y [hash] en el nombre del archivo.

module.exports = {
  output: {
    filename: 'bundle.js'
  }
};

Este ejemplo generará un archivo llamado bundle.js. Para proyectos más complejos, es útil incluir un hash en el nombre del archivo para el control de versiones y el almacenamiento en caché.

module.exports = {
  output: {
    filename: '[name].[contenthash].js'
  }
};

output.publicPath

El output.publicPath define la URL pública desde la cual se servirán los archivos. Esto es útil cuando los archivos se sirven desde un CDN o un subdirectorio.

module.exports = {
  output: {
    publicPath: '/assets/'
  }
};

En este ejemplo, todos los archivos se servirán desde /assets/.

output.clean

La opción output.clean limpia el directorio de salida antes de cada compilación, asegurando que no queden archivos obsoletos.

module.exports = {
  output: {
    clean: true
  }
};

Ejemplo Completo

A continuación, se muestra un ejemplo completo de configuración de salida en Webpack:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash].js',
    publicPath: '/assets/',
    clean: true
  },
  mode: 'production'
};

Ejercicio Práctico

Ejercicio 1: Configuración Básica de Salida

  1. Crea un archivo webpack.config.js en la raíz de tu proyecto.
  2. Configura la salida para que los archivos se guarden en un directorio build y el nombre del archivo sea main.js.
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'main.js'
  },
  mode: 'development'
};

Ejercicio 2: Configuración Avanzada de Salida

  1. Modifica la configuración para que el nombre del archivo incluya un hash de contenido.
  2. Configura publicPath para que los archivos se sirvan desde /static/.
  3. Asegúrate de que el directorio de salida se limpie antes de cada compilación.
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: '[name].[contenthash].js',
    publicPath: '/static/',
    clean: true
  },
  mode: 'production'
};

Resumen

En esta sección, hemos aprendido cómo configurar la salida de Webpack utilizando las opciones output.path, output.filename, output.publicPath y output.clean. Estas configuraciones nos permiten controlar dónde y cómo se generan los archivos de salida, lo cual es esencial para la organización y el despliegue de nuestros proyectos.

En el próximo tema, exploraremos los Loaders, que nos permiten transformar archivos de diferentes tipos antes de incluirlos en el bundle final.

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