Introducción a Webpack

Webpack es un sistema de bundling (empaquetador de módulos) ya que nos permite generar un único archivo JS con todos los módulos que nuestro desarrollo requiere.

Se le puede considerar la evolución de Grunt y Gulp, como también un Browserify más avanzado.

Para instalar webpack, debemos tener instalado Node con NPM, luego, sólo ejecutamos:

Obviamente con esta opción estamos instalando webpack de manera global, no obstante, podemos instalarlo sólo para el proyecto en cuestión.

Para trabajar, Webpack utiliza un archivo de configuración llamado webpack.config.js. En su configuración más básica, nos encontramos con:

  • entry: Archivo Javascript de entrada, que es el que tiene toda la lógica
  • output: Archivo de salida, es el bundle de todo lo que se generó a través del entry

Ejemplo

Creemos un archivo index.js con el siguiente código

Ahora, vamos al archivo de configuración webpack.config.js

Lo que estamos indicando es que el archivo de entrada es index.js, y que el archivo de salida es index.js, pero que está ubicado en /bundle/.

Con __dirname indicamos el directorio actual de webpack.config.js

Ahora, para probar que esté correcto, creamos index.html con lo siguiente

Lo último que nos queda es ejecutar webpack en la consola para que inicie el bundle

Si queremos deja la consola “en escucha”, que quiere decir que esté leyendo todos los cambios, debemos ejecutar

Y eso es todo, si abrimos nuestro navegador, vemos el console.log.

Ejemplo 2

El ejemplo anterior, es algo extremadamente básico, lo que haremos a continuación, será tener un poco más de lógica, para ir entendiendo como funciona Webpack.

Creamos nuestro HTML

Luego, el archivo mensaje.js

Finalmente, en el archivo index.js obtenemos la función hola de mensaje.js y la agregamos al H1 de nuestro HTML

Si compilamos webpack, podemos ver como nuestro H1 ahora tiene el texto deseado