Configura tu primer proyecto con Webpack
Contenido del curso
Webpack
Parcel
ESBuild
Rollup
Vite
Conclusiones
Configura tu primer proyecto con Webpack
Configura tu primer proyecto con Webpack
Contenido del curso
Rubén Ernesto Aragón Gil
Cesar Antonio Altamirano Castillo
Kyb3r Cipher
Uriel Solis Salinas
Neils Alfaro Bendezu
Misael Gomez
Josue Cerron Tuesta
Brayan Lopez
Santiago Perozo
Kenneth Angulo L
Kenneth Angulo L
Jefred Bedoya
Henry Alexander Velásquez Rosas
Szandor Fernando. Peña Mañón
Cristian Romero
Erick Martin Meza Alonso
Neils Alfaro Bendezu
En el minuto 6:36 no se mira el comando, aquí se los dejo:
npm install webpack webpack-cli -D
Gracias Rubén, Excelente.
Bien
Resumen
Webpack es un empaquetador de módulos que nacio en 2012, por un desarrollador aleman Tobias Koppers, y es la herramienta más utilizada actualmente dentro de los empaquetadores que existen en JS.
.
bundle → Si tenemos muchos elementos o módulos con dependencias que tendremos separados por archivos (arquitectura amigable para poder encontrar los elementos), pero al final cuando queramos enviar nuestro producto a producción usamos webpack para poder empaquetar los diferentes archivos.
.
node_modules → Carpeta donde se instalan las dependencias que agregamos.
.
package-lock.json → Historial y el árbol de cada una de las dependencias que se han instalado.
.
package.json → Archivo principal donde tenemos información del proyecto.
Si tienen instalado zsh en la terminal de mac, pueden usar
take nombre_carpeta
Y lo que hará es crear la carpeta y ubicarles en ella.
take nombre_carpeta && code index.js
no olvides ctrl + s, para guardar el archivo
Yo la tengo en Arch. Es un comando muy útil.
En windows el siguiente comando crea el proyecto y les abre el editor de codigo:
mdkir webpack && cd webpack && git init && npm init -y && npm i webpack webpack-cli -D && code .
Una cosa importante en esta configuración inicial es no incluir la carpeta node_modules en el trackeo de Git, primero porque ocupa mucho espacio, y segundo porque no hace falta, ya que esas dependencias estarán en el package.json (incluídas las dependencias de desarrollo), entonces si alguien va a clonar nuestro proyecto, solo tiene que ejecutar npm install y se instalan todas esas dependencias en su máquina local ya que npm se fija en el package.json.
!The Beginner's Guide to Webpack Dependencies | Toptal®
¿Qué pasa si no instalo webpack-cli?
Si omites la instalación de webpack-cli, te quedarás sin la capacidad de comunicarte con Webpack desde tu terminal. El paquete principal (webpack) contiene toda la lógica interna para empaquetar tu código, pero no sabe cómo escuchar tus instrucciones por línea de comandos.
El webpack-cli (Command Line Interface) es el puente que traduce los comandos que escribes en la terminal hacia el núcleo de Webpack. Sin él, no podrías ejecutar comandos esenciales como npx webpack para iniciar la compilación o pasarle banderas de configuración rápida. Al instalar ambos juntos usando npm install webpack webpack-cli -D, te aseguras de tener tanto el motor que hace el trabajo pesado como el volante para poder controlarlo fácilmente durante el desarrollo.
Webpack: Empaquetador de Módulos
Preparación del Entorno
git init para control de versiones.npm init para gestionar dependencias.npm install webpack webpack-cli --save-dev (dependencias de desarrollo).Estructura del Proyecto
src/: Contiene el código fuente y lógica de la aplicación (ej. index.js).public/: Almacena recursos estáticos como index.html.webpack.config.js: Archivo central para definir la configuración del empaquetado.node_modules/: Carpeta generada automáticamente con las dependencias instaladas.¿Más utilizada actualmente? :v
¿Más utilizada actualmente?
Sí, a nivel profesional Webpack es más utilizado, mayormente por proyectos legacy, pero también por su estandar de empaquetación y la estabilidad. Aunque con proyectos nuevos, se usa Vite como empaquetador, ya que es más fácil de aprender, bastante completo, y trae nuevas freatures cada cierto tiempo, manteniendoce al día. Por otro lado también están llegando frameworks que ya son capaces de hacer el trabajo de un empaquetador, haciendo que algunos no sean tan útiles para un proyecto que ya tiene un framework con dichas herramientas (e.g. serían NextJS, Angular, creo que VUE también, entre otros menos conocidos).
indentación
Para los que se preguntan por el tema de vscode, es synthwave https://marketplace.visualstudio.com/items?itemName=RobbOwen.synthwave-vscode Y el tema me parece que es JetBrainsMono.