Instalación de Webpack y construcción del proyecto

👣 Pasos de la clase

1. Clonar el proyecto

   git clone https://github.com/gndx/js-portfolio.git
   

2. Instalar webpack
   con npm

   npm install webpack webpack-cli -D 
   

   con Yarn

   yarn add webpack webpack-cli -D 
   

El proyecto

git clone https://github.com/gndx/js-portfolio.git

Todo nuestro código termina siendo una tira ininteligible de letras y signos extraños gracias a Webpack? Es lo mas bonito que me ha pasado desde hace años ❤️

Me tome el atrevimiento de gitignorar:

/dist
/node_modules
package-lock.json

INSTALATION OF WEBPACK AND CONSTRUCTION OF THE PROYECT 😄

Entendimos las bases de webpack pero ahora vamos a crear un proyecto que nos va a permitir trabajar con todas las particularidades que nos brinda webpack y preprarlo para mandarlo a produccion

• CSS
• Imágenes
• fonts
• optimización de código

El proyecto que realizaremos será un pequeño portafolio en el que podremos ver nuestra foto y nuestro nombre y redes sociales.

Lo clonamos de aqui y hacemos uso de los assets que previamente nos prepararon

gndx/js-portfolio

Luego de ello instalaremos webpack para configurar nuestro proyecto

utilizamos el comando para poder ver webpack en mod production

npx webpack --mode production

Tus posibles dudas resueltas:

1. ¿Qué es webpack-cli?

CLI se refiere a Conmmand line interface y básicamente es instalar los comandos de webpack en la terminal para que puedas ejecutarlos.
En cuanto a “-D”, es la abreviación de “–save-dev”, lo cual indica que esta es una dependencia que se utilizará solo para el desarrollo del proyecto y que no afecta para el funcionamiento para cuando se hace el despliegue a producción.
.
.

2. ¿Por qué “npx webpack” y no “npm webpack”?

NPM se refiere a “node package manager” y sirve para instalar paquetes como tal. Cuando instalas un paquete, posteriormente necesitarás indicar dónde se encuentra el paquete para ser ejecutado. Esto se hace mediante dos maneras (elegir la que se te haga más fácil):

Indicando en la terminal donde se encuentra el paquete:
./node_modules/.bin/your-package-name
poniendo un script en tu “package.json”:

{
    "name": "Your app",
    "version":  "1.0.0",
    "scripts":  {
            "your-package":  "your-package-name"
     }
}

y después ejecutandolo en la terminal mediante: npm run your-package-name
.

NPX viene de “node package execute” y en esencia sirve para ejecutar paquetes sin necesidad de instalarlos previamente. NPX checa si es que ya tenías instalado el paquete y si no, lo descarga e instala para hacer una ejecución de una sola vez.

De hecho, es posible hacer lo que el profe hizo de “npx webpack” usando npm (porque ya instalamos webpack).
En tus scripts añade:
webpack: "webpack". No olvides poner una coma en la línea anterior, que es donde aparece el script “test”.
.
Ejecuta en tu terminal: npm run webpack
.
Aquí una captura de que yo lo intenté y el resultado es el mismo:

.
En el “script” puedes incluir la parde de --mode production o --mode developmentcomo lo hace el profe al usar npx.
.
Esta aclaración solo es para que sepas de dónde viene cada cosa. Recomiendo seguir y hacer las cosas como indica el profesor para evitar inconvenientes futuros.

para los que utilizan YARN la instalacion seria:

yarn add -D webpack webpack-cli

Comando webpack para compilar por primera vez

para generar gitignore para node
Instalar de forma global

sudo npm i -g gitignore

LIstar todos los posibles tipos de gitignore soportado

gitignore -types

Crear gitignore para node:

gitignore Node

Creo que lo mas dificil de este curso es dejar de escribir weboack en lugar de webpack en los comandos de la consola. 😛

Clonar repositorios de otras personas y luego subir a tu repositorio en github:

1: git init
2: Clonar proyecto: git clone https://github.com/gndx/js-portfolio.git
3: Editar proyecto con tus cambios
4: revisar cual es el origen remoto de tu repo: git remote -v
5: cambiar tu origen remoto: git remote set-url origin TU_URL_PROYECTO_GITHUB
6: Revisar el cambio realizado en el origen remoto de tu repo: git remote -v
7: Moverse a la rama master: esto necesario porque seguramente el reposiotrio que creaste en remoto no tiene creado la rama master:
con esto al subir el push no te dara error: git checkout -b master
8: seguir los pasos normales para subir repo: git add. / git commit y git push origin master

con el comando code . -r reutiliza el mismo vscode si abriste el comando desde una terminal con vscode de otro proyecto, batalle mucho para recordar el comando ese que vimos con JuanDC

Se mira bien el proyecto. A echarle, ganitas.

exelente explicacio del profesor nos enseña mucho

tengo un macbook pro del 2019 con i5 de 2.4 ghz creo, creia q era buena pero me tarda como varios minutos en instalar webpack. mientras a el profe es casi instantaneo.
en todo lo demas es bastante rapida

whyyyy?

👌