👣 Pasos de la clase
- Clonar el proyecto
git clone https://github.com/gndx/js-portfolio.git
- Instalar webpack
con npm
con Yarnnpm install webpack webpack-cli -D
yarn add webpack webpack-cli -D
Introducción a Webpack
¿Qué es Webpack?
Conceptos básicos de Webpack
Proyecto inicial
Tu primer build con Webpack
Instalación de Webpack y construcción del proyecto
Configuración de webpack.config.js
Loaders y Plugins en Webpack
Babel Loader para JavaScript
HTML en Webpack
Loaders para CSS y preprocesadores de CSS
Copia de archivos con Webpack
Loaders de imágenes
Loaders de fuentes
Optimización: hashes, compresión y minificación de archivos
Webpack Alias
Deploy del proyecto
Variables de entorno
Webpack en modo desarrollo
Webpack en modo producción
Webpack Watch
Deploy a Netlify
Herramientas de desarrollo complementarias
Webpack Dev Server
Webpack Bundle Analyzer
Webpack DevTools
Integración básica de React.js
Instalación y configuración de React
Configuración de Webpack 5 para React.js
Configuración de plugins y loaders para React
Configuración de Webpack para CSS en React
Optimización de Webpack para React
Deploy del proyecto con React.js
Próximos pasos
Continúa con el Curso Práctico de Webpack
Crea una cuenta o inicia sesión
¡Continúa aprendiendo sin ningún costo! Únete y comienza a potenciar tu carrera
Oscar Barajas Tavares
Aportes 19
Preguntas 11
git clone https://github.com/gndx/js-portfolio.git
npm install webpack webpack-cli -D
con Yarnyarn 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
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
Luego de ello instalaremos webpack para configurar nuestro proyecto
utilizamos el comando para poder ver webpack en mod production
npx webpack --mode production
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.
.
.
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 development
como 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?
👌
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?