FAZT, cuando vas a agregar un botón de donar? mas de uno te debemos mucho! saludos bro... esperando mas videos de deploy, zeit now, amazon, etc.. grande crack!
para el que tenga error en la parte donde se crea el archivo html con el webpack-html-plugin . Porseacaseo para la version webpack 5, adicionalmente hay que instalar un devDependencies con : npm i --save-dev html-webpack-plugin@next , y con eso funciona como si nada hubiera pasado ;v Por cierto , gracias fazt , eres lo máximo
Fantástico Fazt! Magnífico tutorial. No solo estás creando y haciendo mucho por la comunidad, también eres un ejemplo a seguir en como compartes el conocimiento. Gracias por tu esfuerzo!!
Un gusto Luis, por cierto te recomiendo ver también vitejs, ya que te ha interesado webpack. Vite es una nueva herramienta con mejor rendimiento que webpack :)
Si están teniendo problemas a la hora de ejecutar "npm start", cuando crean el comando, utilicen en cambio: "start": "webpack serve --config webpack/webpack.config.js --mode development --env development"
Excelente tutorial para entender webpack.. todo perfecto. solo me dio problema con el image-webpack-loader.. debe ser que transcribí mal.. Pero aparte de eso, todo perfecto.. Gracias. Por fin entendí el fin de webpack.. desde Venezuela (11/09/2020),
Excelente afianzando conocimiento de la mano de Fazt... Una pregunta estimado, en el caso de que se requiera crear una carpeta static con varias imagenes hay que hacer una linea de import './static/nombredelaimagen.png' por cada imagen que se necesite? Gracias nuevamente pór compartir el conocimiento
Felicidades gran tutorial, pero me preguntaba como se crean las otras páginas a parte de la index.html y dividir el css y js en varios archivos.Gracias
Tengo una pregunta con respecto a las imagenes, para compilar varias imagenes hay que usar require en cada uno ? intente require('./static/*') ... pero me da error al compilar, alguna forma de compilar todas las imagenes en la carpeta static
Hola, Fazt. Gracias por compartir. Tengo una pregunta: ¿Y para el tema de las rutas? O sea, yo tengo mi app hecha con Node,js y quisiera saber cómo puedo hacer para renderizar rutas, usar controladores y demás, es que el contenido que encuentro es siempre con un único html pero sin rutas. Gracias.
Genial, la duda que tengo, es siq ueremos subir el proyecto a git, que archivos deberiamos de subir, o subimos todos? como seria el gitreadme o el gitignore? Saludos
Fazt muchas gracias por tus videos, han sido de gran ayuda. Me gustaría saber si vas a realizar alguna vez un Login con React-Native o si tienes algún video que me puedas recomendar : )
Muchas gracias por estos tutoriales...me han ayudado de mucho..pero ahora en la practica me nace una pregunta... Tengo una carperta con 10 o 15 imagenes (logo,favicon, banner..etc)...¿tengo que importar cada imagen en app.js?¿si la respuesta es si, hay otra forma de importar toda la carpeta de imagenes? ...y si pudieras dar un ejemplo muchas gracias
Hola. me encantó este video, me sirvió de mucho. Quería hacer una pregunta. Estoy usando Sass y cuando quiero compilar todo en la carpeta dist tengo una imagen que llamo desde la url en sass, y me la transforma a una imagen vacia, fallada. ¿Qué puede estar pasando?
Hola fazt, se por tu videos que siempres configuras el entorno de desarrollo por tu cuentas cuando utilizas react. Pero como se podria integrar en el create-react-app con un servidor de express? saludos!
Es practicamente lo mismo, crear el proryecto con create-react-app y luego de desarrollar colocar lo que genera, en la carpta public. No estaría mál para un video, voy crear algo pronto de lo que me mencionas para publicarlo por este canal. Un saludo
Buen video, solo una pregunta cómo podré exportar clases y métodos en js con webpack?, por qué en index.html declaro con un script tipo módulo para importar el archivo bundle pero no puedo acceder a clases y sus métodos. Salu2!
Hola Fazt, estoy reemplazando gulp con webpack, quiciera saber cómo puedo procesar mi carpeta de imagenes que esta en src/assets/[img,logo,gallery] para que webpack utilice las mismas rutas en la carpeta dist?
Muchas gracias por tus vídeos. Tengo un serio problema con una web que estoy realizando. Con ella utilizo montones de ficheros js que no quiero ponerlos en un bundle.js. Los tengo en un directorio denominado js y los intento pasar a mi proyecto final con file-loader y no hay forma. Además tengo dos ficheros sass independientes y sólo puedo convedrtir uno a css con el mini-extract-css-plugin, no se ni encuentro cómo hacerlo con dos ficheros sass. Mismo problema con los .pug. ¿Puedes explicar cómo utilizar webpack con un proyecto real, que tenga varios css, varios js, varios (html, pug, etc), metidos en sus correspondientes directorios? El ejemplo que das no sirve en la vida real, es demasiado sencillo. En internet sólo hay tutoriales chorras, la mayoría de pl,ugins de webpack que encuentro sólo sirven para gestionar un único fichero. Por ejemplo, en las expresiones regulares como /\.pug/ sólo sirven para los .pug que estén en el directorio raíz del proyecto, pero si estos están dentro de un directorio, ¿qué se hace? No encuentro solución; todo el mundo que explica webpack copy-pastea de otros cual cacatúa. Busco por internet expresiones regulares y los ejemplos siempre son los mismos (ya caducos). No me dedico al desarrollo web, soy licenciado en matemáticas y en mi tiempo libre estoy creando una web que utiliza Mathjax. La empecé con Gulp, pero al cambiar de portátil he tenido que actualizar nodejs y ya no me funciona; así que he decidido cambiar a Webpack, pero le veo muchos inconvenientes, parece un proyecto que lleva años pero inacabado; si no es así, ¿podrías explicar cómo tener tu web realizada con webpack? Pero una web real, con sus templates en sus respectivos directorios, sus js en su directorio js, sus sass en su directorio css, etc. Es decir; la continuación de este vídeo pero cuando tienes varios ficheros y directorios del mismo tipo.
Hola Fazt, que opinas de Parcel? Buscando opciones a la config compleja de WebPack dí con él: se promociona como un bundler con 0 config inicial. Adicionalmente soporta muchos features de fábrica sin tanto loaders o plugins y con un caché que acelera la compilación varias veces vs WebPack. Una comparativa: blog.jakoblind.no/parcel-webpack/ Saludos y muy bueno el canal 👍🏻
Si están utilizando *webpack 5* y al tratar de correr el webpack-dev-server les tira este errores, tienen que actualizar webpack-cli a la versión 4 y reemplazar el comando webpack-dev-server --config por webpack serve --config. --> más info en github.com/webpack/webpack-dev-server/issues/2759
Gracias por todo lo que publicas fazt, a alguien le da un error cuando coloca la configuración del image-webpack-loader(instale la version 5 y en este video es la 4, sin embargo al ir a la documentacion sigo todos los pasos y igualmente me da un error: Error: Cannot find module 'imagemin-pngquant' alguien sabe como resolverlo) ?
La verdad eso no estoy seguro, pero puedes hacer un api en cualquier framework, express laravel etc y desde vue consumir esa api, yo estoy haciendo un proyecto personal en esa modalidad.
@@FaztCode me lo imaginé? Pero es mejor? Osea tu contenido es bueno como para dividir la atención en dos canales sientes que llegaste al tope de subscriptores en el otro canal ?
Eeee coder, ¿ Por que en estos videos ofrecen ayuda a las consultas si luego no contestan ? Como en RUclips es gratis hacer videos, cualquiera cuelga los suyos y ya son importantes. Hay que ser un poco mas profesional, mi niño hace mejores videos
Eres de lo mejor q le ha pasado a los empiricos del desarrollo de software de habla hispana, sigue adelante
FAZT, cuando vas a agregar un botón de donar? mas de uno te debemos mucho! saludos bro... esperando mas videos de deploy, zeit now, amazon, etc.. grande crack!
para el que tenga error en la parte donde se crea el archivo html con el webpack-html-plugin . Porseacaseo para la version webpack 5, adicionalmente hay que instalar un devDependencies con : npm i --save-dev html-webpack-plugin@next , y con eso funciona como si nada hubiera pasado ;v Por cierto , gracias fazt , eres lo máximo
Gracias! :^)
Muuito obrigado. Resolveu um problema que estava tentando resolver há meses!! Ótima aula!!
Fantástico Fazt! Magnífico tutorial. No solo estás creando y haciendo mucho por la comunidad, también eres un ejemplo a seguir en como compartes el conocimiento. Gracias por tu esfuerzo!!
Me salvas la vida siempre. Gracias!
Muchísimas gracias por el esfuerzo y la solidaridad de compartir conocimiento
Dejo el like antes de verlo, gracias Fazt por estos vídeos, al rato vengo a mirar el contenido.
Te amo hermano, me salvaste
Lo esperaba este vídeo muchas gracias Fazt, haber cuando te puedes uno sobre el routing para completar la SPA 😁
Thanks for your hard work and this awesome tutorial love from india
india ? how do u understand? u know spanish?
@@temp4355 no I understand the code ..
El macho xdxd
Thank you very much for the video. You won another subscriber
Fazt .. Eres Genial.. muchas gracias.. my friend.. saludos desde Venezuela (02/08/2022)
Un gusto Luis, por cierto te recomiendo ver también vitejs, ya que te ha interesado webpack. Vite es una nueva herramienta con mejor rendimiento que webpack :)
@@FaztCode Muchas gracias mi estimado, estarè viendo ese video de Vite.. GRacias por sus eternas recomendaciones
Segundo comentario, gracias por este nuevo material.
Excelente explicación...
Si están teniendo problemas a la hora de ejecutar "npm start", cuando crean el comando, utilicen en cambio:
"start": "webpack serve --config webpack/webpack.config.js --mode development --env development"
Excelente tutorial para entender webpack.. todo perfecto. solo me dio problema con el image-webpack-loader.. debe ser que transcribí mal.. Pero aparte de eso, todo perfecto.. Gracias. Por fin entendí el fin de webpack.. desde Venezuela (11/09/2020),
un video utilizando webpack merge estaria genialll
HEROEE!!! Alegraste mi domingo, abrazo grande
Muy buen tutorial y muy completo. Gracias y felicitaciones ¿Se puede evitar importar al archivo JS caad imagen que se requiera?
Excelente afianzando conocimiento de la mano de Fazt...
Una pregunta estimado, en el caso de que se requiera crear una carpeta static con varias imagenes hay que hacer una linea de import './static/nombredelaimagen.png' por cada imagen que se necesite? Gracias nuevamente pór compartir el conocimiento
Buenas pudistes dar una solución a este inconveniente? yo estoy teniendo el mismo problema
Yo tengo el mismo problema. Lo puedieron resolver?
@@mariopace2909 Pueden utilizar esta función:
function importAll(r) {
return r.keys().map(r);
}
importAll(require.context('./static/', false, /\.(png|jpe?g|svg)$/));
@@luisgranados2006 muchas gracias Luis!
Felicidades gran tutorial, pero me preguntaba como se crean las otras páginas a parte de la index.html y dividir el css y js en varios archivos.Gracias
jajaja fazt me hiciste dar mucha riza cuando buscaste el pug jajajajaja
Fazt por cada imagen debo hacer un import en el app.js ??......
genial como siempre, un tutorial para hacer login con Facebook, nodeJS y mongoDB
Haz un vídeo de material UI... Saludos tus vídeos en verdad me han servido mucho, te lo agradezco..
Tengo una pregunta con respecto a las imagenes, para compilar varias imagenes hay que usar require en cada uno ? intente require('./static/*') ... pero me da error al compilar, alguna forma de compilar todas las imagenes en la carpeta static
Hola, pudiste resolver el problema?
Que genio ! de grande quiero ser como vos... XD
Muchas gracias =)
que tema utilizas para visual studio code XD? esta bonito, y gracias por los videossss!
Hola, Fazt. Gracias por compartir. Tengo una pregunta: ¿Y para el tema de las rutas? O sea, yo tengo mi app hecha con Node,js y quisiera saber cómo puedo hacer para renderizar rutas, usar controladores y demás, es que el contenido que encuentro es siempre con un único html pero sin rutas. Gracias.
Genial, la duda que tengo, es siq ueremos subir el proyecto a git, que archivos deberiamos de subir, o subimos todos? como seria el gitreadme o el gitignore? Saludos
Fazt muchas gracias por tus videos, han sido de gran ayuda.
Me gustaría saber si vas a realizar alguna vez un Login con React-Native o si tienes algún video que me puedas recomendar : )
Muchas gracias por estos tutoriales...me han ayudado de mucho..pero ahora en la practica me nace una pregunta...
Tengo una carperta con 10 o 15 imagenes (logo,favicon, banner..etc)...¿tengo que importar cada imagen en app.js?¿si la respuesta es si, hay otra forma de importar toda la carpeta de imagenes? ...y si pudieras dar un ejemplo muchas gracias
hace 2 años :c pudiste resolverlo?? por favor me ayudarías bastante
como evitamos que se genere el archivo extra que genera file loader?
Hola. me encantó este video, me sirvió de mucho. Quería hacer una pregunta. Estoy usando Sass y cuando quiero compilar todo en la carpeta dist tengo una imagen que llamo desde la url en sass, y me la transforma a una imagen vacia, fallada. ¿Qué puede estar pasando?
Que puedo hacer si a mi no me minifica por defecto sass?
Una consulta si yo quisiera que las imagenes se compilaran y agregaran en carpetas distintas o una dentro de otra como podría hacer?
Hola! para configurar las URLs de Css, no logro hacerlo
Hola fazt, se por tu videos que siempres configuras el entorno de desarrollo por tu cuentas cuando utilizas react. Pero como se podria integrar en el create-react-app con un servidor de express? saludos!
Es practicamente lo mismo, crear el proryecto con create-react-app y luego de desarrollar colocar lo que genera, en la carpta public.
No estaría mál para un video, voy crear algo pronto de lo que me mencionas para publicarlo por este canal. Un saludo
Fazt Code muchas gracias crack! Lo esperare.
Buen video, solo una pregunta cómo podré exportar clases y métodos en js con webpack?, por qué en index.html declaro con un script tipo módulo para importar el archivo bundle pero no puedo acceder a clases y sus métodos. Salu2!
Buenísimo!
Hola Fazt, estoy reemplazando gulp con webpack, quiciera saber cómo puedo procesar mi carpeta de imagenes que esta en src/assets/[img,logo,gallery] para que webpack utilice las mismas rutas en la carpeta dist?
amigo porque ya no esta tu video tienda Virtual Guitar Store sabes de casualidad
como se puede hacer enrutamiento con handlebars ?
Deberias crear un curso de Google Cloud Platform 🙏🏻⭐️😉
Solo una pregunta como se puede comprimir varios archivos de img y.hbs y js y css o cualquier archivo que necesitamos
FAZT Que theme usas en VSCOE
como se intrega un template comprado a un proyecto asi?
Es mejor utilizar webpack por sobre gulp ?
Estoy descansando Fazt, por qué nos haces esto?
hi what color theme do you use in visual code?
hola. y que paso cuando tenemos múltiples scss ?
Muchas gracias por tus vídeos. Tengo un serio problema con una web que estoy realizando. Con ella utilizo montones de ficheros js que no quiero ponerlos en un bundle.js. Los tengo en un directorio denominado js y los intento pasar a mi proyecto final con file-loader y no hay forma. Además tengo dos ficheros sass independientes y sólo puedo convedrtir uno a css con el mini-extract-css-plugin, no se ni encuentro cómo hacerlo con dos ficheros sass. Mismo problema con los .pug. ¿Puedes explicar cómo utilizar webpack con un proyecto real, que tenga varios css, varios js, varios (html, pug, etc), metidos en sus correspondientes directorios? El ejemplo que das no sirve en la vida real, es demasiado sencillo. En internet sólo hay tutoriales chorras, la mayoría de pl,ugins de webpack que encuentro sólo sirven para gestionar un único fichero. Por ejemplo, en las expresiones regulares como /\.pug/ sólo sirven para los .pug que estén en el directorio raíz del proyecto, pero si estos están dentro de un directorio, ¿qué se hace? No encuentro solución; todo el mundo que explica webpack copy-pastea de otros cual cacatúa. Busco por internet expresiones regulares y los ejemplos siempre son los mismos (ya caducos). No me dedico al desarrollo web, soy licenciado en matemáticas y en mi tiempo libre estoy creando una web que utiliza Mathjax. La empecé con Gulp, pero al cambiar de portátil he tenido que actualizar nodejs y ya no me funciona; así que he decidido cambiar a Webpack, pero le veo muchos inconvenientes, parece un proyecto que lleva años pero inacabado; si no es así, ¿podrías explicar cómo tener tu web realizada con webpack? Pero una web real, con sus templates en sus respectivos directorios, sus js en su directorio js, sus sass en su directorio css, etc. Es decir; la continuación de este vídeo pero cuando tienes varios ficheros y directorios del mismo tipo.
FAZT, tienes un tutorial de como implementar ng-blockui en angular con peticiones http
Ya sé que los nombre son largos pero ya te vas a acostumbrar cuando veas modulos mucho mas peores - Fazt code 2077
xdxd
Hola Fazt, que opinas de Parcel?
Buscando opciones a la config compleja de WebPack dí con él: se promociona como un bundler con 0 config inicial. Adicionalmente soporta muchos features de fábrica sin tanto loaders o plugins y con un caché que acelera la compilación varias veces vs WebPack.
Una comparativa: blog.jakoblind.no/parcel-webpack/
Saludos y muy bueno el canal 👍🏻
Si están utilizando *webpack 5* y al tratar de correr el webpack-dev-server les tira este errores, tienen que actualizar webpack-cli a la versión 4 y reemplazar el comando webpack-dev-server --config por webpack serve --config. --> más info en github.com/webpack/webpack-dev-server/issues/2759
cual es la solucion ?
:( :v
Muchas gracias Sil, por publicar la solución!
Gracias por todo lo que publicas fazt, a alguien le da un error cuando coloca la configuración del image-webpack-loader(instale la version 5 y en este video es la 4, sin embargo al ir a la documentacion sigo todos los pasos y igualmente me da un error: Error: Cannot find module 'imagemin-pngquant' alguien sabe como resolverlo) ?
Hola Fazt ya que haz realizado vídeos sobre python porque no realizas algo con django? Saludos desde Montevideo-Uruguay.
Pronto publicare ejemplos de Django y flask. estos días publico un tutorial de Pipenv, y luego se vendría ejemplos de estos frameworks :)
@Fazt ¿Qué distribución de Linux usas??
La distro se llama Linux Lite 4 :) -> www.linuxliteos.com/
Hey Coders!!!
FAZT Qué S.O estás usando?
usa linux lite 4
exelente explicacion, una pregunta. Cuando utilizo background: url(' '); la imagen no se muestra y sale un error al compilar, alguna solucion?
css-loader?url=false
@@0845738495 muchas gracias por tu respuesta me ha sido de mucha ayuda 😀
Fazt porfavor haz un Workflo con React y Python y djangoo
Se puede mezclar vuejs con handlebars?
La verdad eso no estoy seguro, pero puedes hacer un api en cualquier framework, express laravel etc y desde vue consumir esa api, yo estoy haciendo un proyecto personal en esa modalidad.
Por favor, ¿podrías hacer un video sobre cómo usar WebPack con WordPress? No le encuentro la vuelta en aplicar WebPack con WP. :(
Hola, acá te dejo un enlace para utilizar WP con Webpack etc, espero te sirva :) github.com/tonik/theme
@@aleferrari8473 Muchas gracias! Lo voy a estudiar para ver cómo aplicarlo a mi theme. Un abrazo.
Webpack usando Merge PLs!!!
Cual es la razón de tener dos canales de RUclips? Si podemos saber claro
Dinero
@@FaztCode me lo imaginé? Pero es mejor? Osea tu contenido es bueno como para dividir la atención en dos canales sientes que llegaste al tope de subscriptores en el otro canal ?
Aveces hablas rapido, aveces lento, tomate tu tiempo y se claro con la pronunciación. buen video
Eeee coder, ¿ Por que en estos videos ofrecen ayuda a las consultas si luego no contestan ? Como en RUclips es gratis hacer videos, cualquiera cuelga los suyos y ya son importantes. Hay que ser un poco mas profesional, mi niño hace mejores videos
FAZT Que theme usas en VSCOE