WEBPACK: Cómo generar un bundle
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.
Recuerda que puedes comenzar este curso con tu suscripción a OpenWebinars. Si todavía no estás suscrito, aprovecha para hacerlo ahora.