Primeros pasos con Webpack

Hoy en día el desarrollo web ha evolucionado tanto que no es suficiente con utilizar archivos Js, Html y Css. Muchas veces el proyecto requerirá de TypeScript para mejorar el código Js, Sass como preprocesador de estilos, o alguna otra librería o herramienta de JavaScript para no reinventar la rueda. Juntar todas estas herramientas puede ser un dolor de cabeza sobre todo si se trata de un proyecto grande que generalmente llegan a usar decenas de librerías y herramientas en su desarrollo. Es aquí donde entra a ayudarnos Webpack.

En este tutorial aprenderemos a usar Webpack la herramienta por excelencia para empaquetar y combinar todas las librerías que usemos en nuestros proyectos y obtener los archivos necesarios para que nuestro proyecto funcione correctamente con todas sus dependencias.

Índice

1. Qué es webpack
2. Instalando y configurando NPM
3. Instalando Webpack
4. Configurando Webpack
5. Configuraciones personalizadas de Webpack
6. Módulos

1. Qué es webpack

Cuando comenzaste con el desarrollo web y escribías tus primeros archivos JavaScript y CSS de seguro te preguntaste si es posible dividirlos en múltiples archivos para mejorar la legibilidad del código o hacerlo más entendible. Pues déjame decirte que esto es imposible o era imposible de forma nativa y es por eso que se desarrolló webpack, para ayudarnos en este proceso.

Webpack es un empaquetador de archivos, una especie de compilador, que une todos los archivos y los empaqueta para que sea más fácil llevarlos a producción. Empaquetar archivos JavaScript muchas veces se traduce en leer los archivos que escribimos y unirlos en uno solo para que el código JavaScript funcione correctamente en el navegador. Pero sus capacidades no se limitan a eso, mediante el uso de lo que en webpack se llaman loaders y plugins podemos extender sus funcionalidades a la transpilación de código, el preprocesamiento de estilos, uso de frameworks y otros.

2. Instalando y configurando NPM

Primero que nada necesitamos instalar Nodejs para poder utilizar el gestor de dependencias npm. Una vez instalado Nodejs podemos ejecutar el siguiente comando en la terminal para saber si fue instalado correctamente.

node -v

Npm es un gestor de librerías JavaScript, que forma parte de Nodejs. Esta herramienta administra estas librerías ya sea de forma global, instaladas en nuestra computadora, o de forma local, instaladas en el proyecto. Para saber la versión de npm que tenemos instalado utilizamos el siguiente comando.

npm -v

Para crear un proyecto usando npm debemos ejecutar el siguiente comando.

npm init

Este comando nos pedirá información sobre nuestro proyecto. Toda esta información la podemos rellenar después, solamente colocamos Enter a cada una de las preguntas. Pero si queremos simplemente obviar estas preguntas podemos usar el siguiente comando.

npm init -y

Como lo mencioné toda la información del proyecto la podemos modificar en el archivo package.json. Este archivo es bastante intuitivo y sencillo de entender a excepción de algunas propiedades, que explicaremos a continuación.

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": ["programming", "webpack"],
  "author": "AndyGeek",
  "license": "ISC"
}

La propiedad main indica el archivo principal del proyecto y en donde comenzará la ejecución del mismo. La propiedad script es muy interesante y nos permite ejecutar cualquier comando de manera simplificada y directa. Por ejemplo si colocamos un nuevo script llamado geek podemos colocar el comando que este ejecutará, como se muestra en el siguiente ejemplo.

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "geek": "npm -v"
},

Haciendo esto podremos ejecutar el comando para ver la versión de npm que tenemos instalado usando npm run geek, y de esta forma podemos simplificar comandos mucho más grandes. Por último la propiedad license indica la licencia que tendrá nuestro proyecto. Nosotros usamos ISC para crear un proyecto OpenSource, pero hay más licencias que podemos usar, que no son objetivos de este tutorial.

3. Instalando Webpack

Ahora que ya tenemos un proyecto configurado con npm, tenemos que instalar webpack en su interior, para esto tenemos varias opciones. La primera opción es usar el siguiente código; sin embargo, no es la recomendada, ya que se instalará como dependencia general de desarrollo y de producción. Pero nosotros queremos webpack solo en desarrollo mas no en producción.

npm install webpack

Instalar Webpack nos generará tres cambios, el primero es que se crear un archivo llamado package-lock.json. Este archivo contiene metadatos de las dependencias que se instalaron en el proyecto. Recuerda que webpack es toda una herramienta de desarrollo así que utiliza muchas dependencias para poder funcionar. El segundo cambio es que también se crea la carpeta node_modules que es el lugar donde se instalan las dependencias de webpack y en general ahí es donde se instalarán todas las dependencias que pronto agregaremos al proyecto. El tercer y ultimo cambio es que dentro del archivo package.json se agrego la versión de nuestra herramienta webpack que acabamos de instalar.

"dependencies": {
    "webpack": "^4.44.1"
}

Ese símbolo extraño ^ indica que nuestro proyecto funciona para cualquier versión superior al que esta instalado por lo que si hay una versión superior disponible instalará dicha versión. Si queremos que se instale la versión exacta simplemente podemos borrar ese símbolo o utilizar el siguiente comando para instalar webpack.

npm install webpack --save-exact

Por otro lado, webpack es una dependencia que solo se usa en desarrollo ya que para producción solo usaremos la compilación que nos devuelve webpack. Por lo tanto debemos instalar webpack como una dependencia de desarrollo. Así que usamos el siguiente comando.

npm install webpack --save-dev --save-exact

Ahora debemos instalar el CLI (Comand Line Interface) de webpack para poder ejecutar los comandos propios de webpack que entre tantas cosas nos servirá para compilar nuestro proyecto.

npm install webpack-cli --save-dev --save-exact

Como último punto importante de esta sección es que si queremos saber la versión de webpack que tenemos en el proyecto debemos usar npx ya que este nos dará la versión instalada en el proyecto, ya que webpack -v nos mostraría la versión global que tenemos instalado de webpack

npx webpack -v

4. Configurando Webpack

Como dijimos anteriormente Webpack empaqueta nuestro proyecto con todas sus dependencias y todo lo necesario para funcionar correctamente. Así que debemos crear una carpeta donde queremos que se guarden todos estos archivos, que se crean tras la compilación que webpack haga de nuestro proyecto. Para eso creamos la carpeta public. Además el código que nosotros creamos debe de estar también dentro de otra carpeta que generalmente se le nombra src de source. Con estas dos carpetas creadas, crearemos nuestro primer archivo javascript index.js, dentro de src, el cual ahora compilaremos usando webpack.

Para compilar nuestro proyecto haremos uso del siguiente comando donde colocamos el archivo de entrada y el archivo de salida de nuestro proyecto.

npx webpack --entry ./src/index.js --output ./public/bundle.js

Tras la ejecución de este comando posiblemente obtengamos un Warning relacionado al 'mode'. Esto sucede porque no le indicando a webpack el modo de compilado que queremos que este haga en nuestro proyecto. Existen dos modos de compilación el modo production, destinado a producción y el modo development destinado al desarrollo. La diferencia entre ellos es que en el modo destinado a producción el código está comprimido y no es legible, mientras que en el modo de desarrollo, el código es legible para su revisión. Podemos especificar el modo de la siguiente forma.

npx webpack --entry ./src/index.js --output ./public/bundle.js --mode development

Como ves no es un comando pequeño el cual debemos colocar cada vez que queramos generar nuestro código js. Por esto es mejor colocar toda esta configuración dentro de un archivo llamado webpack.config.js el cual debemos crear. Dentro del archivo debemos colocar la configuración usando JavaScript como se muestra a continuación.

// Esta linea nos permite utilizar el modulo path que ya viene con Nodejs
const path = require("path");

module.exports = {
  entry: "./src/index.js",
  mode: "development",
  output: {
    // Usamos __dirname para obtener la ruta absoluta donde nos encontramos
    // Usamos public para colocar el archivo dentro de una carpeta public
    path: path.resolve(__dirname, "public"),
    // Aqui indicamos el nombre del archivo resultante de la compilación
    filename: "bundle.js",
  },
};

Ahora que la configuración está almacenada dentro de este archivo, solo bastaría con utilizar el siguiente comando para compilar nuestro proyecto.

npx webpack

Y podemos incluso hacerlo más fácil. Crear un comando especial para que cuando lo usemos nuestro proyecto se transpile al nuevo código JavaScript. Tal cual como lo hacen los frameworks como React, Vuejs o Angular. Para esto solo debemos configurar el archivo packege.json con el siguiente script.

"scripts": {
  ...
  "build": "webpack",

Despues de esto solo debemos usar el siguiente comando para poder ejecutar webpack y generar nuestro nuevo código JavaScript.

npm run build

A veces también es necesario usar múltiples entradas para webpack, es decir que webpack compile múltiples archivos en una única ejecución. Para hacer esto es suficiente con colocar las entradas como un objeto cada uno con su propio nombre como se muestra en el siguiente ejemplo. Además usar [name] en el output para que cada archivo tenga el nombre de cada archivo que colocamos en el objeto de entrada.

const path = require('path')

module.exports = {
    entry: {
        home: path.resolve(__dirname, 'src/index.js'),
        prices: path.resolve(__dirname, 'src/price.js'),
        contact: path.resolve(__dirname, 'src/contact.js'),
    }
    mode: 'production',
    output: {
        path: path.resolve(__dirname, 'public'),
        filename: '[name].js'
    }
}

Y listo!! Ya terminamos con la configuración inicial de webpack. Ya estamos aprendiendo como es que los frameworks utilizan webpack para compilar un proyecto. Pues bien sigamos viendo esto más a fondo.

5. Configuraciones personalizadas de Webpack

Las configuraciones personalizadas son otras configuraciones que podemos crear y ejecutarlas según lo que necesitemos, por ejemplo, podemos crear una configuración para cuando necesitemos usar webpack para producción y crear otra configuración para cuando necesitemos utilizar webpack para desarrollo. Si tienes experiencia con algún framework de seguro sabes que existen comandos como npm run build o npm run develop que lo que hacen es justamente esto, ejecutar configuraciones distintas de webpack.

Para crear una configuración nueva de webpack necesitamos crear más archivos de configuración, así que podemos crear una carpeta llamada external donde colocaremos un nuevo archivos de configuración de webpack llamado webpack.config.js esta configuración será para producción así que tendrá mode: 'production' y el siguiente código en su interior.

const path = require("path");

module.exports = {
  entry: path.resolve(__dirname, "../src/index.js"),
  mode: "production",
  output: {
    path: path.resolve(__dirname, "../public"),
    filename: "bundle.js",
  },
};

Además crearemos un nuevo script en el package.json para poder ejecutar esta configuración de manera rápida.

"build:prod" : "webpack --config ./external/webpack.config.js"

Así que ahora al ejecutar el siguiente comando ejecutaremos webpack con la configuración en modo producción únicamente usando el siguiente comando.

npm run build:prod

6. Módulos

Ahora que ya tenemos configurado webpack en nuestro proyecto, ya podemos usar el import dentro de nuestro código JavaScript sin preocuparnos de nada, ya que el único archivo compilado resultante de webpack incluirá todos el código necesario proveniente de todos los archivos que compilemos. De esta forma ya podemos separar nuestro código JavaScript en varios archivos distintos llamados módulos.

En el siguiente ejemplo tenemos dos archivos el primero llamado index.js que importa el modulo first.js utilizando el import de la siguiente manera.

// Index.js
import "./first.js";
console.log("I'm index.js");

// First.js
console.log("I'm first.js");

Con estos dos archivos implementados ejecutamos el comando de webpack que compila nuestro proyecto npm run build y para probar si el código resultante bundle.js corre perfectamente creamos un archivo index.html que enlazará mediante la etiqueta <script> el archivo bundle.js. Si todo lo hicimos bien, se ejecutarán los código del archivo first.js y index.js en nuestro navegador.

Asi que ya podemos usar el import para utilizar dependencias de npm que instalemos en nuestro proyecto. Por ejemplo instalemos la dependencia moment que nos sirve para hacer uso de fechas en JavaScript y veamos como podemos usarla. Para instalar esta dependencia debemos utilizar el siguiente comando.

npm install moment

Luego podemos llamar a esta dependencia dentro de nuestra archivo JavaScript haciendo uso de import o require como se muestra en los siguientes ejemplos.

import moment from "moment";

console.log(moment().format("dddd"));

Pues bien, de esta forma, ya somos capaces de utilizar dependencias dentro de un proyecto simple de HTML y en suma ya sabemos los concepto básicos de Webpack y de por qué es tan importante hoy en día. En el próximo tutorial aprenderemos a inyectar código de otros archivos dentro de nuestro archivo JavaScript. Soy AndyGeek y nos vemos en el próximo tutorial!! 😁