Que es un bundler de JS

Para entender esto es un poco útil que aprendan como funcionaban las dependencias antes, hace mucho tiempo atrás (unos 6 años más o menos) para usar librerías en frontend tenías dos opciones, o te bajabas el código normalmente a una carpeta llamada vendors y subías eso con tu código o cargabas la librería desde un CDN, esto era muy común en la época de jQuery, una vez tenías la URL del CDN o de tu carpeta vendors agregabas un script en tu HTML antes del script de tu código

<script src="url a un cdn de tu librería"></script>
<script src="url a /vendors/tu-librería.js"></script>
<script src="url de tu código que require de las librerías anteriores"></script>

El problema de esto es que

  1. Todo se carga de forma global, si tu librería se llamaba inputMask entonces ninguna otra función en tu código u otra librería podía usar inputMask como nombre
  2. Mantener esta lista de librerías se podía volver super complejo mientras iba creciendo, algunos sitios tenían 15 o 20 scrips de librerías
  3. La carga de la página se veía afectada ya que era necesario cargar varios archivos antes de poder ejecutar tu código JS, en esa época no existía HTTP/2 y HTTP/1 solo permitía 5 requests a tu servidor a la vez

Debido a esto se agregaron sistemas de módulos a JS, en Frontend se usaba algo llamado Require.js, era una librería que cargabas una vez y luego usabas:

require([path1, path2]), (lib1, lib2) => /* tu código acá */)

De esta forma podías cargar librerías dinámicamente, una librería podía usar Require.js para cargar más dependencias de un CDN y vos ni enterado, el problema de Require.js es que esto generaba un efecto cascada donde tu código importaba dos librerías y cada una luego importaba otras y así, pero hasta que tu código no terminaba de importar las primeras dos, Require.js no sabía que necesitaba más entonces tenía que esperar para poder cargar todas.

Justo al mismo tiempo en Node.js se usaba Common.js con la sintaxis const lib = require("lib"), y Node además tenía npm.

npm te permitía bajar dependencias de un registro (registry) único y las bajaba a la carpeta node_modules (el nombre viene porque era para Node.js originalmente).

Un tipo inventó entonces una herramienta llamada Browserify la cual te permitía pasarle un archivo .js de tu computadora el cual usara Common.js como sistema de módulos, lo que hacía la librería era ver que otros archivos .js de tu computadora o node_modules eran importados por tu archivo principal y cuales eras las dependencias de estos, así hasta terminar de leer todos los archivos, luego los juntaba en un único archivo y lo guardaba en tu computadora, esto se conoce como crear un bundle o paquete, este bundle tenía todo el código de tu app, luego este archivo lo subías a tu sitio web y en tu HTML lo cargabas con una etiqueta <script> y listo, el archivo ya tenía todo el código necesario.

Con el tiempo salió ECMAScript 2015 (o 6 como se le decía al principio) y este traía un sistema de módulos con la sintaxis import lib from "path" que es la que se usa ahora, nuevas herramientas como Babel convertían esta sintaxis al equivalente en Common.js (básicamente cambiar import por const y from "path" por = require("path")) y así podías usar Browserify como antes.

Pasó más el tiempo y salieron nuevas herramientas a reemplazar Browserify, una de estas, webpack se volvió super popular y básicamente devoró todo el mercado de bundlers ya que permitía importar imágenes, CSS, archivos en formatos como SASS, videos, audios, etc. directamente en tu código JS, los optimizaba al hacer el build (el proceso de bundle) y te daba la URL como resultado, lo que te dejaba hacer import logo from "./logo.png" y obtener una URL que podías usar en un tag <img>.

En la actualizad, herramientas como Create React App, Next.js, Gatsby, Vite, Vue CLI, etc. usan cosas como webpack y Babel internamente pero te las abstraen para que no tengas que usarlas y configurarlas vos mismo, lo que no solo te hace la vida mucho más fácil sino que te va a dar un resultado mucho mejor al poder aplicar optimizaciones a tu bundle que capaz no sabías que existían o que necesitabas o como configurar.

Mi recomendación es que no te molestes en aprender mucho webpack, entendé que es y listo, algún día capaz lo necesites, mientras usá estar herramientas.

Si no estas usando algún framework en específico existe Parcel.js el cual te permite pasarle un archivo HTML y busca que CSS y JS son cargados usando <link> y <script> y los optimiza y hace el build para generar el JS y CSS final, todo eso incluyendo el HTML actualizado te lo deja en una carpeta y esa carpeta la podés subir a GitHub Pages o algún otro servidor de archivos estáticos (Netlify, Vercel, etc.).