Webpack Worflow | Sass, Handlebars, Css, Imagenes y más

[@juliomontilla100]

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!

[@eddiekaka1452]

Eres de lo mejor q le ha pasado a los empiricos del desarrollo de software de habla hispana, sigue adelante

[@fernandofernando8382]

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

[@francis_js]

Gracias! :^)

[@francelonascimento406]

Muuito obrigado. Resolveu um problema que estava tentando resolver há meses!! Ótima aula!!

[@eduardo8034]

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!!

[@pepfarin5032]

Muchísimas gracias por el esfuerzo y la solidaridad de compartir conocimiento

[@danielmartin73]

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"

[@erickrh]

Me salvas la vida siempre. Gracias!

[@homerox]

Muy buen tutorial y muy completo. Gracias y felicitaciones ¿Se puede evitar importar al archivo JS caad imagen que se requiera?

[@andresrodriguez4585]

Dejo el like antes de verlo, gracias Fazt por estos vídeos, al rato vengo a mirar el contenido.

[@luismonagas573]

Fazt .. Eres Genial.. muchas gracias.. my friend.. saludos desde Venezuela (02/08/2022)

[@FaztCode]

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 :)

[@luismonagas573]

@@FaztCode Muchas gracias mi estimado, estarè viendo ese video de Vite.. GRacias por sus eternas recomendaciones

[@seica5561]

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),

[@arsalanshaikh3763]

Thanks for your hard work and this awesome tutorial love from india

[@temp4355]

india ? how do u understand? u know spanish?

[@arsalanshaikh3763]

@@temp4355 no I understand the code ..

[@edwingarcia5043]

El macho xdxd

Fazt por cada imagen debo hacer un import en el app.js ??......

[@sergiocastillamunoz877]

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

[@IngPedroAraujo]

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

[@andysamanezrivera5144]

Buenas pudistes dar una solución a este inconveniente? yo estoy teniendo el mismo problema

[@mariopace2909]

Yo tengo el mismo problema. Lo puedieron resolver?

[@luisgranados2006]

@@mariopace2909 Pueden utilizar esta función: function importAll(r) { return r.keys().map(r); } importAll(require.context('./static/', false, /\.(png|jpe?g|svg)$/));

[@mariopace2909]

@@luisgranados2006 muchas gracias Luis!

[@dav.R7]

Thank you very much for the video. You won another subscriber

[@federicolacolla4568]

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?

[@lowenrochenoire9771]

Lo esperaba este vídeo muchas gracias Fazt, haber cuando te puedes uno sobre el routing para completar la SPA 😁

[@jon4torr3s]

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

[@mariopace2909]

Hola, pudiste resolver el problema?

[@angelivanmartinez9510]

como evitamos que se genere el archivo extra que genera file loader?

[@agushaven]

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

[@soycmramos]

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.

[@victorericccaullavillanuev2000]

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

[@segtian1133]

hace 2 años :c pudiste resolverlo?? por favor me ayudarías bastante

[@cristianarieta3871]

Solo una pregunta como se puede comprimir varios archivos de img y.hbs y js y css o cualquier archivo que necesitamos

[@andysamanezrivera5144]

Una consulta si yo quisiera que las imagenes se compilaran y agregaran en carpetas distintas o una dentro de otra como podría hacer?

[@joelmendoza8185]

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!

[@reynaldoguarachitola3736]

como se puede hacer enrutamiento con handlebars ?

[@javierr5845]

Es mejor utilizar webpack por sobre gulp ?

[@aaronfabriciosantacruzvald8101]

Excelente explicación...

[@giovannygarzonsoto]

que tema utilizas para visual studio code XD? esta bonito, y gracias por los videossss!

[@giovannygarzonsoto]

un video utilizando webpack merge estaria genialll

[@gustavobarahona5452]

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?

[@cadev_code]

Que puedo hacer si a mi no me minifica por defecto sass?

[@joseperez8058]

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!

[@FaztCode]

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

[@joseperez8058]

Fazt Code muchas gracias crack! Lo esperare.

[@IvoryEatsTheWorld7]

HEROEE!!! Alegraste mi domingo, abrazo grande

[@infogerencia1067]

Hola! para configurar las URLs de Css, no logro hacerlo

[@codestudio867]

FAZT Que theme usas en VSCOE

[@coindrawstore]

jajaja fazt me hiciste dar mucha riza cuando buscaste el pug jajajajaja

[@Ramah1819]

Te amo hermano, me salvaste

[@ezequielbecerra6992]

como se intrega un template comprado a un proyecto asi?

[@OnlineGamePlaying]

hi what color theme do you use in visual code?

[@josuedjhcayola4386]

hola. y que paso cuando tenemos múltiples scss ?

[@amairanifox1332]

amigo porque ya no esta tu video tienda Virtual Guitar Store sabes de casualidad

[@luisrdz3969]

Haz un vídeo de material UI... Saludos tus vídeos en verdad me han servido mucho, te lo agradezco..

[@roycabrera3464]

genial como siempre, un tutorial para hacer login con Facebook, nodeJS y mongoDB

[@mauro8509]

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 : )

[@oscaralvarez1519]

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) ?

[@Linuxmusica]

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.

[@rafaelpereiraarias]

Estoy descansando Fazt, por qué nos haces esto?

[@SilSanchez]

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

[@fernandofernando8382]

cual es la solucion ? :( :v

[@mariopace2909]

Muchas gracias Sil, por publicar la solución!

[@techOGR]

Deberias crear un curso de Google Cloud Platform 🙏🏻⭐️😉

[@andresdecba]

Que genio ! de grande quiero ser como vos... XD Muchas gracias =)

[@AndresGuerreroHD]

Segundo comentario, gracias por este nuevo material.

[@joseluisvaldespinoperez7638]

FAZT, tienes un tutorial de como implementar ng-blockui en angular con peticiones http

[@edwingarcia5043]

Ya sé que los nombre son largos pero ya te vas a acostumbrar cuando veas modulos mucho mas peores - Fazt code 2077 xdxd

[@kuchete]

exelente explicacion, una pregunta. Cuando utilizo background: url(' '); la imagen no se muestra y sale un error al compilar, alguna solucion?

[@0845738495]

css-loader?url=false

[@kuchete]

@@0845738495 muchas gracias por tu respuesta me ha sido de mucha ayuda 😀

[@mabvmex_nrd]

@Fazt ¿Qué distribución de Linux usas??

[@FaztCode]

La distro se llama Linux Lite 4 :) -> www.linuxliteos.com/

[@pekuruguay]

Se puede mezclar vuejs con handlebars?

[@andresrodriguez4585]

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.

[@4ndres]

FAZT Qué S.O estás usando?

[@pokedotdev]

usa linux lite 4

[@andresgarciaalves]

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 👍🏻

[@5thtoe]

Por favor, ¿podrías hacer un video sobre cómo usar WebPack con WordPress? No le encuentro la vuelta en aplicar WebPack con WP. :(

[@aleferrari8473]

Hola, acá te dejo un enlace para utilizar WP con Webpack etc, espero te sirva :) github.com/tonik/theme

[@5thtoe]

@@aleferrari8473 Muchas gracias! Lo voy a estudiar para ver cómo aplicarlo a mi theme. Un abrazo.

[@AlexSilvera1]

Hola Fazt ya que haz realizado vídeos sobre python porque no realizas algo con django? Saludos desde Montevideo-Uruguay.

[@FaztCode]

Pronto publicare ejemplos de Django y flask. estos días publico un tutorial de Pipenv, y luego se vendría ejemplos de estos frameworks :)

[@g4brieljs59]

Fazt porfavor haz un Workflo con React y Python y djangoo

[@ErnestoRojas20145]

Buenísimo!

[@juliocesarrivera5754]

Webpack usando Merge PLs!!!

[@enriqueruiz320]

Hey Coders!!!

[@jon4torr3s]

Cual es la razón de tener dos canales de KZbin? Si podemos saber claro

[@FaztCode]

Dinero

[@jon4torr3s]

@@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 ?

[@RevampWorkshop]

Aveces hablas rapido, aveces lento, tomate tu tiempo y se claro con la pronunciación. buen video

[@miguelsinmas502]

Eeee coder, ¿ Por que en estos videos ofrecen ayuda a las consultas si luego no contestan ? Como en KZbin 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

[@yormian]

FAZT Que theme usas en VSCOE