Configurar plugins en Rollup es lo que te permite transformar un empaquetador básico en una herramienta lista para producción. Aquí vas a ver cómo integrar cuatro plugins clave dentro de rollup.config.js para copiar archivos, manejar estilos, generar HTML dinámico y optimizar imágenes en tu proyecto.

¿Para qué sirven los plugins en Rollup?

Los plugins en Rollup definen flujos específicos dentro del proceso de empaquetado. Cada uno cumple una función puntual y tú decides cuáles agregar según las necesidades reales de tu proyecto.

En esta configuración vas a trabajar con cuatro plugins concretos:

• rollup-plugin-copy para mover recursos desde source hasta dist.
• rollup-plugin-css-only para procesar y entregar los estilos como un bundle.
• @rollup/plugin-html para generar el archivo HTML dinámico con referencias a scripts y estilos.
• @rollup/plugin-image para preparar y optimizar imágenes importadas.

¿Qué hace un plugin en un bundler? Ejecuta una tarea específica durante el proceso de build, como copiar archivos, transformar código o generar nuevos recursos en la carpeta de salida.

¿Cómo evaluar si un plugin es confiable?

Antes de instalar cualquier dependencia, revisa de dónde viene y quién la mantiene. Si una herramienta lleva más de seis meses sin actualizarse, probablemente perdió soporte activo y vas a heredar problemas.

Los recursos sanos muestran commits recientes, issues en discusión y mejoras que se reflejan semana a semana. Esa actividad constante es la señal de que la comunidad sigue detrás del proyecto.

¿Cómo importar los plugins en rollup.config.js?

Antes de declarar la sección plugins, necesitas traer cada paquete con su respectivo import. La sintaxis sigue el patrón estándar de módulos:

javascript import html from '@rollup/plugin-html'; import copy from 'rollup-plugin-copy'; import css from 'rollup-plugin-css-only'; import image from '@rollup/plugin-image';

Cada referencia apunta al plugin que instalaste previamente. html se encarga del template dinámico, copy mueve archivos entre carpetas, css arma el bundle de estilos e image procesa las imágenes que importes desde tu código.

¿Cómo configurar cada plugin dentro del array de plugins?

La propiedad plugins recibe un array, y dentro vas llamando cada función con su objeto de configuración cuando lo necesites.

¿Cómo copiar archivos con rollup-plugin-copy?

El plugin copy recibe un objeto con la propiedad targets, que a su vez es un array. Cada target define un src (origen) y un dest (destino).

javascript copy({ targets: [ { src: 'source/assets/**/*', dest: 'dist/assets' } ] })

La expresión source/assets/**/* le indica que copie todas las subcarpetas y archivos contenidos dentro de assets, sin importar la profundidad. Así mantienes tu carpeta source ordenada durante el desarrollo y dejas que el build arme la estructura final en dist.

¿Cómo configurar estilos y HTML?

Para los estilos, el plugin css necesita saber cómo se llamará el archivo de salida. Le pasas la propiedad output con el nombre del bundle:

javascript css({ output: 'bundle.css' })

El plugin html se usa sin configuración adicional. Por defecto detecta dónde están los scripts y los estilos generados, y arma el archivo HTML con las referencias correctas.

javascript html()

¿Por qué algunos plugins no requieren configuración? Porque ya traen valores por defecto pensados para los casos más comunes. Solo le pasas un objeto cuando necesitas modificar ese comportamiento estándar.

¿Cómo agregar optimización de imágenes?

El plugin image también funciona sin parámetros. Su rol es permitir que importes imágenes directamente en tu código JavaScript y prepararlas para que Rollup las procese dentro del build.

javascript image()

¿Cómo queda el array final de plugins?

Reuniendo todo, la sección plugins de tu rollup.config.js luce así:

javascript plugins: [ copy({ targets: [ { src: 'source/assets/**/*', dest: 'dist/assets' } ] }), css({ output: 'bundle.css' }), html(), image() ]

Con esta estructura, Rollup ya sabe qué hacer con tus archivos estáticos, tus hojas de estilo, tu HTML y tus imágenes. El siguiente paso es escribir la lógica dentro de index.js y compilar el proyecto para verlo funcionando.

¿Qué plugin de Rollup te ha resultado más útil en tus proyectos? Cuéntame en los comentarios cuál agregarías a esta configuración base.