👣 Pasos de la clase
- Clonar el proyecto
git clone https://github.com/gndx/js-portfolio.git - Instalar webpack
con npmnpm install webpack webpack-cli -Dyarn 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
Instalación de Webpack y construcción del proyecto
4/28Recursos
Aportes 12
Preguntas 9
Ordenar por:
El proyecto
git clone https://github.com/gndx/js-portfolio.git
En el caso de ser un proyecto que No es SPA (problemas de hosting), se puede usar webpack ? alguien sabe ?
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
Luego de ello instalaremos webpack para configurar nuestro proyecto
utilizamos el comando para poder ver webpack en mod production
npx webpack --mode production
Comando webpack para compilar por primera vez
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?
Creo que lo mas dificil de este curso es dejar de escribir weboack en lugar de webpack en los comandos de la consola. 😛
para los que utilizan YARN la instalacion seria:
yarn add -D webpack webpack-cli
¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.