Más allá de su descripción oficial, podríamos definir Webpack como una herramienta Open Source utilizada por los desarrolladores para empaquetar y exportar todos los ficheros necesarios para que un proyecto funcione con todas sus dependencias frontend. Entre otras funcionalidades, con Webpack podemos obtener un archivo JavaScript que contenga la totalidad del código necesario en un proyecto minimizado y transpilado, incluyendo sus dependencias, o bien un archivo con el CSS tras haber pasado los preprocesadores necesarios. En este artículo, te explicamos un poco más el funcionamiento de Webpack y cómo instalar esta útil herramienta para el desarrollo y la creación de tu Web.
Antes que nada, conviene que aclaremos que utiliza Webpack no entraña gran dificultad para las funciones más básicas, pero al igual que ocurre con otras herramientas de este tipo, según vamos personalizando y profundizando en la aplicación y en sus funcionalidades, su uso se va complicando, como es lógico. O dicho de otro modo: cuantas más variables tengamos que controlar con Webpack, mayor será el código de configuración y los plugins que tenemos que introducir en el paquete (que generalmente se conocer por la palabra en inglés bundle).
Conceptos básicos de Webpack
Antes de meternos de lleno con Webpack, es importante aclarar unos conceptos básicos previos que nos ayudarán a entender mejor cómo funciona esta herramienta:
- Entry Point o punto de entrada. Sirve para indicar el punto exacto desde el que Webpack empezará a analizar el código para generar los paquetes.
- Output o punto de salida. Indica el lugar donde se colocarán los paquetes que se hayan generado: JavaScript, CSS, HTML, etc
- Loaders o cargadores. Son los sistemas que hacen posible que Webpack transforme todos los archivos o ficheros requeridos (todo aquello que deba modificarse en la aplicación debe cargarse con un loader).
- Plugins. Todos los plugins recomendados para WordPress amplían el rango de funcionalidades por defecto de Webpack; permiten tareas como la optimización del código empaquetado, la gestión y optimización de las imágenes, incluir trazas entre cargadores, comprobar cómo ha ido la ejecución o añadir código o variables en los archivos de nuestra aplicación.
Ahora que tenemos claros los conceptos básicos de Webpack, podemos entrar de lleno en su instalación.
Instalación de Webpack de manera global
Para poder instalar Webpack es necesario disponer de una versión actualizada de NodeJS y resulta más que aconsejable tener conocimientos básicos de este framework para poder manejar Webpack correctamente.
Una vez que hemos comprobado que tenemos NodeJS actualizado, procedemos a instalar Webpack en el equipo de manera global, para poder acceder a él desde cualquier punto del terminal. Es recomendable también instalarlo de modo local en el proyecto Webpack para que se nos quede almacenado como dependencia de desarrollo en package.json.
Para instalarlo de manera global:
npm install --global webpack webpack-cli
El paquete webpack corresponde con el propio Webpack, mientras que el paquete webpack-cli contiene los comandos necesarios para realizar las operaciones con Webpack, lo que se conoce como Interfaz de línea de comandos o CLI por su acrónimo en inglés.
Instalar Webpack de manera local en el proyecto
Para instalar Webpack de manera local, conviene que tengamos en cuenta si hemos comenzado ya a trabajar en nuestro proyecto. En caso de que no hayamos empezado todavía, crearemos una carpeta para el proyecto en el que queramos usar Webpack. En cambio, si el proyecto ya está creado, iremos a la carpeta raíz, donde lo iniciaremos con npm. De este modo, todas las dependencias que instalemos se irán grabando:
npm init
Aquí podemos indicar todo lo que necesitemos, además de grabar los valores determinados pulsando enter.
A continuación, instalaremos como dependencia de desarrollo Webpack en el proyecto, así como su CLI:
npm i --save-dev webpack webpack-cli
Gracias a este paso, podremos indicar que nuestro proyecto utiliza Webpack, facilitando a los desarrolladores que instalen dependencias con npm la instalación de Webpack en local.
Disponer de Webpack en local nos permite poder manejar una versión diferente de la herramienta para cada proyecto, facilitando el mantenimiento de todos ellos. De este modo, nos garantizamos que cada proyecto tenga su propia configuración de Webpack y nos libera de depender de la versión instalada en Webpack en global.
Para comprobar si Webpack está instalado en un proyecto, podemos hacerlo mediante el comando webpack-v.
Ya instalado Webpack, en próximos artículos prácticos profundizaremos en los primeros pasos que tenemos que dar para trabajar con este útil recurso para desarrolladores.