Si pude… I did ❤❤
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
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Oscar Barajas Tavares
Aportes 37
Preguntas 9
Si pude… I did ❤❤
Si lo quieren desplegar en caliente solo arrastra en la parte de /sites la carpeta de dist OJO no la carpeta del proyecto si no la de distribution
Para los que tengan un error en el path de los archivos que se generan deben cambiar esto:
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: "/",
},
Por esto:
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: "./",
},
¿Qué es lo que pasa con la carpeta dist?, ¿Por qué ya no fue generada en el segundo proyecto “Integración básica de React.js” como lo hicimos en el proyecto anterior?
Para los que no quieren complicarse la vida y quieran hacer un deploy directo a github pages en un rama gh-pages. Les recomiendo instalar la dependencia gh-pages y crear un scrip para hacer deploy.
npm install --save gh-pages
De ante mano tienen que haber subido todo a un repositorio en github y hacer build.
Suponiendo que tenemos el build de nuestro proyecto en una carpeta build:
"script": "gh-pages -d build"
Agregar al package.json cual será la url del deploy en github, por ejemplo tiene esta estructura:
"homepage": "https://myusername.github.io/my-app",
Esta dependencia va a subir la carpeta build a github y va a hacer deploy automáticamente, luego va a aparecer en la consola el mensaje (Published)
Les dejo la guía completa, Nota: sirve para hacer deploy de lo cualquier sitio estático que estés haciendo.
gh-pages
Todos podemos! 😄 si somos dedicados y perseverantes ,
Recuerden los errores son amigos.
Veo que no se genera ningún archivo css en /dist pero los estilos están bien aplicados, alguien sabe que sera?
Muy buena la parte de react …aqui el mio
Online baby! 👉 URL
Lo importante de esto,es tener todo anota,ya que webpack solo es configuracion mas que nada y estar pendiente de cada detalle.
Listo
con repositorio de bitbuket :
git clone https://[email protected]/Andy00/curso-webpack-react.git
sitio aun valido :
https://reliable-dasik-00c6cc.netlify.app/
No me fue bien con las publicaciones en Netlify, ni con el de portfolio ni con el de react. Con el primero salía un error permanente en Netlify que no se pudo corregir y con este proyecto, Netlify ni siquiera encuentra el repositorio estando correctamente creado en Github. No entendí porque este proyecto no tiene el archivo netlify.toml y porqué hay un path haciendo referencia al dist pero no existe este directorio dentro del proyecto.
excelente curso
Reto completado, migre el proyecto a react e hice el deploy en nerlify. Proyecto
Aquí mi proyecto hecho en React!!!
Portfolio
Terminé 💚
Les comparto la migración a React.
app
repositorio
✅ Listo!
Repo: https://github.com/brayanrodallega/curso-webpack-react
Deploy: https://app-webpack-react.netlify.app/
Vean el comentario de Oscar Oros.
Yo tuve problemas para desplegar la app con los elementos de Path y Alias en los webpack.config, pero como aún no estaban en uso los eliminé y funcionó perfecto.
No encontré en la documentación ninguna, claro, porque el error está en la linea anterior a Alias…
hola paso a dejar un comentario, si no les abre del deploy en “https://netlify.com”, borren en “webpack.config.js” la linea donde colocamos: publicPath ‘/’, y hay si lo publica bien…
LO LOGREEEEEEEEEEEEEE
Más deploy
Gracias a la perseverancia lo pude publicar en Netlify , me daba un error porque le faltaba una s al archivo styles.
Aqui el link : https://willowy-blini-c0cd1e.netlify.app.
Aqui el repo: https://github.com/villerca/curso-webpack-react.git
it works!
link
Salió! 😃
react-webpack-i.netlify.app
Deploy AQUI
Lo logreee Link
🤩 site
Conseguido 👉 Click!
Reto
Repositorio
Live Demo
Lo conseguí!
Si se pudo!
Aqui esta mi aporte:
👌
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?