Las cookies nos permiten ofrecer nuestros servicios. Al utilizar nuestros servicios, aceptas el uso que hacemos de las cookies. Más Información. Aceptar

WEBPACK: Cómo generar un bundle

Pablo Fernandez
  • Escrito por Pablo Fernandez el 07 de Febrero de 2019
  • 3 min de lectura | Desarrollo Web
WEBPACK: Cómo generar un bundle
El reproductor de video será cargado en breves instantes.

Pasos previos

Para generar nuestro primer bundle con Webpack vamos a necesitar tener instalados tanto Webpack como Webpack CLI.

En esta ocasión vamos a generar un bundle muy sencillo utilizando solamente las opciones con consola, sin ficheros de configuración. No es la opción más recomendada, porque no podemos sacar todo el poder que tiene Webpack, pero es una buena opción para crear nuestro primer bundle.

Comenzamos comprobando que tenemos Webpack instalado, lo que hacemos desde la consola con el siguiente comando:

npm list webpack

Buscará entre todas nuestras dependencias y nos mostrará si tenemos Webpack instalado y qué número de versión sería. En nuestro caso vamos a trabajar con la versión 4.25.1, aunque lo realmente importante es trabajar con la versión 4, ya que de la versión 3 a la 4 se introdujeron muchos cambios.

Continuamos comprobando que tenemos también instalado Webpack CLI, para lo que nos vamos a la consola de nuevo y ejecutamos este comando:

npm list webpack-cli

Nos devuelve la confirmación de que está instalado Webpack CLI, además de indicarnos qué versión es la que tenemos en nuestro sistema, que en nuestro caso es la 3.1.2.

Para este ejemplo hemos creado previamente nuestro proyecto, que podemos comprobar con este comando:

ls -l

Podemos ver tenemos el fichero package.json, los ficheros que crea npm, las dependencias y una carpeta dist, que contiene un fichero index.html con una estructura básica, dónde importaremos el bundle una vez lo generemos.

Generación de un bundle

El comando de Webpack, cuando lo ejecutamos, va a intentar buscar un entry point o un punto de entrada de nuestra aplicación, y por defecto lo va a buscar en src/index.js, por lo que vamos a crear primero el directorio:

mkdir src

Después definimos el archivo index.js: touch index.js

Comprobamos que se ha creado todo de forma correcta:

ls -l

Y pasamos a editar el archivo que hemos creado:

vi src/index.js 

En el mismo vamos a hacer que nos muestre un mensaje por la consola, para lo que añadimos lo siguiente:

console.log(‘Hello world’);

Grabamos el fichero, que es el que por defecto Webpack va a intentar importar, y después vamos a ejecutar el comando, lo que haremos de una forma muy rápida, accediendo al script:

./node_modules/webpack/bin/webpack.js --mode development

Si no funcionara esta sintaxis podría ser por algún problema de permisos o alguna configuración algo más extraña, entonces podríamos intentar ejecutarlo de esta otra forma:

node webpack.js

Webpack se ejecuta a través de Node, por lo que necesitamos tenerlo instalado.

Tras ejecutar el primer comando en modo de desarrollo nos debe encontrar el fichero src/index.js y generar un bundle.

Efectivamente encuentra el archivo y generar nuestro bundle, cuyo entry point es el archivo main.js que acaba de generar, y dónde ha empaquetado nuestro archivo index.js.

Comprobamos que el archivo está creado:

ls dist/

En esta carpeta dist vemos que están los archivos main.js e index.html, el cual vamos a editar:

vi dist/index.html

En el mismo vamos a cambiar la cadena

 <script src=”./.js></script> por <script src=”./main.js></script>

Guardamos el archivo y de esta forma importamos el archivo main.js. En un navegador y ejecutamos el fichero index.html que hemos modificado y comprobamos que nos aparece el texto “Hello world” que habíamos por código en el archivo. Si editamos el código que ha generado Webpack, de esta forma:

 vi dist/main.js 

Es un código bastante grande, el que podemos ver que es un código que difiere mucho de lo que hemos hecho, ya que se utiliza Bootstrap para indicar a Webpack cómo tiene que ejecutar nuestra aplicación. En resumen, hemos podido generar un bundle a partir de nuestra aplicación con un simple comando. Si nuestro fichero necesitara importar otros módulos, Webpack también los hubiera importado.

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.

curso-webpack-basico

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

Relacionado

Te dejamos una selección de cursos, carreras y artículos

WEBPACK: ¿QUÉ ES? [Actualizado 2019]

WEBPACK: ¿QUÉ ES? [Actualizado 2019]

Lenguajes de programación

05 de Febrero de 2019

Te contamos qué es Webpack, cómo funciona y las ventajas que nos ofrece para nuestros desarrollos.

Cómo instalar Webpack

Cómo instalar Webpack

Desarrollo Web

05 de Febrero de 2019

Aprende cómo instalar Webpack de forma guiada gracias a este video.

Estas son algunas de las empresas que ya confían en OpenWebinars

Profesores y profesionales

Nuestros docentes son profesionales que trabajan día a día en la materia que imparten

Conviértete en profesor de OpenWebinars