Desarrollo Web

Requisitos previos

Para instalar WebPack necesitaremos cumplir una serie de requisitos, que son los siguientes:

• Tener instalado NodeJS, porque Webpack necesita el runtime del mismo, porque es un paquete de Node.
• Tener instalado NPM, que se instala automáticamente al instalar NodeJS.
• Tener los paquetes webpack y webpack.cli.
• Un editor de código, para poder procesar los ficheros de configuración y poder crearlos. Se puede utilizar cualquier editor, en este caso utilizaremos en este ejemplo Visual Studio Code.

Descarga de Webpack

Para realizar la instalación de Webpack, lo primero que haremos será visitar la página de NodeJS, dónde según el sistema operativo que estemos utilizando nos va a recomendar dos descargas:

• LTS, que es la que más depurada está y la que nos recomiendan por tener una menor cantidad de bugs.
• La última versión, que es la que está más al día, con las últimas características, con lo cual podemos encontrar más problemas.

En nuestro caso vamos a utilizar la versión LTS, que una vez descargada vamos a instalar siguiendo los pasos de instalador, lo que se realiza de una forma sencilla, tanto en macOS como en Windows.

En Linux habría que utilizar algún sistema de paquetes para instalarlo, indicando los sources de los repositorios, o bien se puede construir con source.

En este ejemplo estamos utilizando la versión 10.5.0, pero realmente da igual la versión que utilicemos, siempre que sea cualquier revisión de la versión 10 de NodeJS.

En cuanto a NPM estamos empleando la versión 6.3.0, aunque es indiferente utilizar otra diferente siempre que sea una revisión de la versión 6 de NPM.

Instalación de Webpack

Una vez comprobado que tenemos tanto NodeJS como NPM instalados en el sistema, vamos a instalar los paquetes tanto de Webpack como de Webpack CLI, lo haremos a nivel local, a nivel de proyecto, ya que es muy mala práctica instalar Webpack, y en general cualquier librería, de forma global. Hacerlo de esa forma puede generarnos problemas de compatibilidad de versiones o de compatibilidad de proyectos, y esto rompe un poco lo que viene siendo una encapsulación de un paquete NPM, es decir, que toda la información viaje con el paquete y no necesite tener cosas globales declaradas para funcionar, sino que todo esté encapsulado en su package.json.

Primero vamos a generar un proyecto de esta forma:

npm init -y

Esto nos va a generar automáticamente un package.json con la configuración por defecto. De esta forma ya tenemos un proyecto creado dónde poder a instalar los paquetes de Webpack y Webpack CLI, lo que hacemos así:

npm install webpack webpack-cli --save-dev

De esta forma lo que hacemos es guardar esta dependencia como una dependencia de desarrollo, de tal forma que si movemos este proyecto a un entorno de integración continua o a un entorno de producción, estas dependencias, cómo van a ser dependencias que solo vamos a utilizar para construir nuestra aplicación, no se van a descargar en sistemas de producción.

Durante la instalación, que según la conexión a Internet que tengamos irá más o menos rápido, se irá descargando todo el core dentro del paquete de Webpack, que lo vamos a utilizar para crear los archivos de configuración.

También descargará todo el contenido del paquete de Webpack CLI, que lo vamos a utilizar para jugar con la consola y para ir ejecutando una serie de comandos.

Una vez finalice la instalación nos aparecerá un resumen de la misma, dónde podemos ver que se han instalado ambos paquetes.

Para mostrar una visualización rápida del proyecto lo hacemos introduciendo el comando:

cat package.json

Podemos ver que las dependencias se han guardado en una propiedad llamada devDependencies, es decir, que son las dependencias de desarrollo, que es lo que buscábamos al utilizar el flag --save-dev en la instalación.

A partir de aquí podríamos ya comenzar a utilizar Webpack.

Si quieres aprender en profundizar sobre Webpack puedes hacer el curso de Webpack básico en el que aprenderás qué es Webpack y cómo utilizarlo en tus proyectos.

Recuerda que puedes comenzar este curso con tu suscripción de OpenWebinars. Si todavía no estás suscrito, aprovecha para hacerlo ahora.