Webpack - Curso rápido para iniciantes

[@leticiafontoura764]

Excelente conteúdo! Só uma dica pra quem encontrar um erro ao chegar no "npm run serve": se a sua versão do Webpack for webpack-cli 4 ou webpack 5, troque "webpack-dev-server" pra "webpack serve". :D

[@TechnoTreco]

Tem uma parte [ 27:00 ] ai no vídeo que eu fui ver e para que o meu babel funcionasse eu tive que ir até a documentação e usei esse comando em { test: /\.m?js$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } } se alguém tiver algum tipo de problema parecido, faça o mesmo. Como essas tecnologias sempre estão atualizando é bom dar uma olhada nas versões.

[@3dwand]

Em todos esses anos nessa industria vital é a primeira vez que vejo um tutorial de webpack tão bem explicado. Ganhou mais um inscrito.

[@mila_kings]

você é foda! muito obrigada. consegui entender finalmente o que é e como funciona webpack!

[@fabriciofeitosadecastro3170]

Excelente aula. plugin html é uma ótima para virar uma vídeo. Estou aguardando. Muito agradecido pelos conteúdos.

[@RaphaelPalladino]

Rápido e direto no assunto. Muito obrigado!

[@comepknoob]

Cara que luta pra instalar o web pack junto com o babel, seu metodo de instalação foi o unico que me ajudou, thanks bro...

[@gilsonconceicao5201]

Ótimo. Parabéns

[@pablorosadossantos4463]

Me salvou, estou estudando pela UDEMY, e não estava entendendo como configurar o webpack, principalmente quando a versão é antiga. Brigado!

[@riemi2009]

Video Fantastico, muito obrigado por compartilhar seu conhecimento

[@moabsantosdefarias3809]

Muito top. Grato pelo conteúdo!

[@erfelipe]

Ótimo exemplo.

[@joaocosta1228]

muito dá hora cara ajudou muito 👍

[@eduardobernardo377]

Valeu Ricardo, foi muito bem explicado!!!

[@gilsonconceicao5201]

Ótimo conteúdo. Obrigado e parabéns.

[@romuelm395]

Obrigado. Irmão. Vc ensina muito bem. Abraços.

[@levybuarque]

Parabéns Ricardo, muito bom seu curso inicial, simples e objetivo.

[@felipemaia3652]

Cara, esse vídeo é excelente! Para um contato inicial com Webpack, é um dos melhores vídeos em português, se não o melhor. O que eu não entendo é porque um salafrário faz uma avaliação negativa. Se não é o que você espera, simplesmente faz um [ALT]+[←]. Não entendo a inabilidade de algumas pessoas de separarem julgamento pessoal do comprometimento e conhecimento que quem ensina tem em relação a quem aprende. Insatisfações à parte, fiquei em dúvida quando você falou sobre "transpilar". Já tinha acendido essa 'luzinha' na primeira vez que li essa palavra em inglês. Digitei no google e a resposta que tive é: transpilar = traduzir + compilar, grosseiramente falando.

[@luancardoso6896]

Conteúdo massa irmão! Me ajudou muito aqui! Boa Didática

[@leandroeffgen7868]

Conteúdo top! Parabéns! Excelente didática ! Gostaria que você fizesse mais vídeos sobre Webpack

[@Guto2K]

Muito direta a explicação, só entendi o conteúdo depois de ver outro vídeo mais explicativo da estrutura do arquivo Webpack linha a linha... Ainda assim seu vídeo é um complemento bem rico pra quem já tem o básico do Webpack. Pra quem sabe zero eu não recomendo, vai ser a mesma coisa que começar orientada a objeto antes de estruturada.

[@paulosspacheco]

Parabéns pela aula. Ser professor é um dom.

[@jefersongomes9730]

Baita Introdução/explicação Ricardo. Muito obrigado pelo esforço em preparar e apresentar este material para a galera! Fico na espera da continuação destes vídeos de webpack. Parabéns!

[@carlosaugusto5112]

Cara muito bom o curso. Parabéns. Ali no finalzinho ficou bem parecido com o angular para iniciar como serve. Show.

[@RafaelAndradeMetalOmega]

Já vou deixar o like, e assim que puder depois vou acompanhar melhor para entender, ainda eu estou iniciando na programação hehe. Mas valeu pelo excelente material apresentado, obrigado.

[@nilmendes7710]

Me ajudou bastante! Obrigado!

[@inju-ekg]

Parabéns! Excelente introdução. Obrigado por disponibilizar esse material rico. Gostaria que você fizesse mais vídeos como esse aprofundando um pouco mais com ambientes e tal.

[@tiagojeronimo3992]

Muito bom. Parabéns pelo conteúdo e pela didatica!!!

[@Davidfdesousa]

Ricardo parabéns, ótimo conteúdo!

[@MarcosSantos-sv1do]

Muito massa Ricardo parabéns excelente didática, muito bom o conteúdo me ajudou demais.

[@josuebarros-desenvolvedorw2490]

Gostei muito mano!!! Parabens pelo conteudo top! Quero começar usar SASS em todos os projetos front-end que eu fizer! Com exceção claro dos projetos em React e Vue que prefiro usar TailwindCSS

[@Matt-pd8vm]

Adorei de mais

[@knowideasdn.bhd.696]

Para o pessoal que estiver utilizando webpack-cli 4 ou webpack 5: No package.json, mude "serve": "webpack-dev-server" para "serve": "webpack serve"

[@fabio5antos]

Show Ricardo! Parabéns pelo vídeo. Seria interessante também falar sobre Minificacão dos Arquivos .JS e .CSS Um outro terror que normalmente vejo quando compramos templates HTML, tipo na ThemeForest, são a quantidade de requisição de arquivos JS e CSS nesses templates. Você poderia abordar em outro vídeo, usando um exemplo prático de um template do tipo, a junção desses mesmos arquivos, JS e CSS em um só, para que grandes projetos melhorassem sua performance, diminuindo a quantidade de requisições no servidor.

[@Bigarelli]

Estou com esse terror, comprei o templete e está osso melhorar a velocidade do site no pagespeed, por isso parei nesse video rsrs.

[@educatto]

Show, parabens, me sinto um tatu que saiu do buraco rsrs

[@haganen0]

Quando foi que inventaram a área vidente developer? Eu já estava para procurar algo sobre o Webpack. A propósito, video excelente.

[@wtx]

Parabéns! Ótima introdução!!

[@magnata219]

Cara excelente vídeo, exatamente o que eu estava precisando!

[@jessikamayumifujimura1146]

Muito bom! Bem prática sua explicação. Parabéns!

Muito show essa aula, parabéns!!!

[@ryanfelipe7040]

Muito bom o vídeo, esclareceu bem !! Parabéns pelo conteúdo!

[@David1queiroz]

entendendo webpack

[@ricardoalmeida7607]

Muito obrigado! Excelente!

[@lucianodejesus6886]

Excelente vídeo. Como faço para configurar ao invés de puro html usar um template engine igual ao "EJS" ?

[@ALEXANNDREF]

Top, gostei de mais, vai ser top se você fazer novas vídeos aulos sobre o assunto, ah! tem como utilizar junto com o php?

[@thalles-dev]

valeu

[@lucasitsme]

Queremos outro video de webpack!

[@eduardoranierosilva]

Mais alguém está com problemas aos 24:37, quando o node não reconhece o '@' e impede a instalação do Babel???

[@flauberthenriques8241]

Excelente vídeo!! Bela explicação, parabéns!! Ricardo, você prefere atualmente Webpack ou Gulp? Vi nos vídeos de bootstrap que você usa o gulp também. Seria possível trazer vídeos de Webpack e Gulp, usando vários plugins incluindo o purgecss? Agradeço desde já.

[@ViniciusPR813]

29:56 No webpack.config.js, esse i no final de "test: /\.(jpe?g|png|gif|svg)$/i" significa o que?

[@Skinvalinzen]

E uma flag de Expressão Regular, que significa "ignore case". Ou seja: Testa essa expressão que eu te passei, mas ignora a diferença entre letras maiúsculas e minúsculas.

[@pablosilva4651]

no meu quando gerei o package.json no inicio ele tinha dentro um tal de "depurar" logo acima do script. O que pode ser? n consigo tirar ele de lá e dpois disso o package fica considerado um erro

[@cutlaug2025]

continua com mais videos de WebPack

[@alanvidal7155]

Muito bom, só uma dúvida de estudante , quando vai subir pro servidor (faz hospedagem), você só sobe só a pasta dist que são os arquivos de produção ?

[@nadirandossantos2903]

Boa tarde, você poderia fazer um vídeo sobre o que você está achando do vscode?

[@RicardoSanches]

anotado 👊

[@LeonardoLuzx]

"serve": 'webpack-dev-server' não funciona mais, fiquei uns 30 minutos passando raiva tentando resolver, no fim os caras do webpack mudaram essa porra desse nome, e não tiraram o antigo, o qual dá erro. Agora é 'serve': 'webpack serve'

[@Pedro-dw3if]

Quando dou um npx webpack aparece isso : "ERROR in main Module not found: Error: Can't resolve './src'" alguém sabe como resolver?

[@BrandevTech]

Não entendi pra que serve o webpack. Como assim Empacotador? Que diferença faz no projeto? Só serve para projetos node?

[@leonarzy]

Uso ele para usar o require do lado do navegador

[@BrandevTech]

@@leonarzy Obrigado pela atenção! O vídeo que se diz pra iniciante deve ser pra iniciante avançado. 🤣🤣🤣

[@fabio5antos]

Já pensou em um vídeo "Desenvolvendo Tema WordPress com WebaPack"? kkkkkk Parabéns pelo vídeo!

essa configuração não funciona para arquivos css, apenas para scss

[@a.caique2827]

O meu deu erro alguem pode me ajudar code ENOSELF npm ERR! Refusing to install package with name "webpack" under a package npm ERR! also called "webpack". Did you name your project the same npm ERR! as the dependency you're installing? npm ERR! npm ERR! For more information, see: npm ERR! npm ERR! A complete log of this run can be found in:

[@a.caique2827]

@@jadsoncriacao vou tentar aqui mano

[@ThiagoFranchin]

Tive um problema na hora do build, aparecia erro no mini-css-extract-plugin Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): ... Resolvi reinstalando o node-sass. com NPM: npm install --save-dev node-sass ou npm rebuild node-sass com Yarn: yarn add node-sass Achei a solução nesse link: github.com/webpack-contrib/sass-loader/issues/530

[@documentacaoitarget8547]

cara pq em vez de sair digitando e falando vc não vai direto ao ponto? pra que serve o webpack? eu tenho que assistir tudo e tentar abstrair pra que ele serve. deus me livre. péssima didática.

[@leandrocosta3902]

Não entendi nada

[@BrunoLuchoMacedo]

Me ajudou muito! Obrigado!