Don't learn Webpack in 2023: A dive into 3 alternatives

  Рет қаралды 10,721

Swashbuckling with Code

Swashbuckling with Code

Күн бұрын

Пікірлер: 69
@邻至陈-k3g
@邻至陈-k3g Жыл бұрын
thanks too much for clearly introduction! Looking forward to your rollup course
@devsaber4148
@devsaber4148 Жыл бұрын
It would be really nice to see Your series about rollup (and also another toools :D). I really like Your videos about webpack. This kind of short videos where You compare technologies or talk about let's call it "big bicture" like in this video also sounds nice.
@SwashbucklingwithCode
@SwashbucklingwithCode Жыл бұрын
Superb feedback, thank you.
@andrewandrosow4797
@andrewandrosow4797 Жыл бұрын
I learned Webpack several months ago. In my opinion: 80 percent of work - writing a configuration file, 20 percent of work - writing HTML/JS/CSS code.
@MrTaekbeen
@MrTaekbeen 5 ай бұрын
Thanks for the great summary of those build tools! Looking forward to your Rollup js course!
@test4321x
@test4321x Жыл бұрын
What is the esbuild plugin for legacy browsers that you mention? :)
@MedyGames
@MedyGames 6 ай бұрын
in a sense there are only 2 alterniatives .. since vite is based on esbuild and rollup :)
@najmantube
@najmantube Жыл бұрын
A Vite tutorial would be great! I followed your webpack tutorial - very good!
@SwashbucklingwithCode
@SwashbucklingwithCode Жыл бұрын
I'm cooking one up now, along with the other tools I mentioned.
@najmantube
@najmantube Жыл бұрын
@@SwashbucklingwithCode Great! Looking forward to it :)
@andrewsorenson5492
@andrewsorenson5492 Жыл бұрын
Anyone else here for the ASMR content? Can't get enough of this Swashbuckler talking about hot reloading. Thanks for the video, keep up the great work!
@SwashbucklingwithCode
@SwashbucklingwithCode Жыл бұрын
Stop embarrassing me.
@고민영-y7s
@고민영-y7s Жыл бұрын
Please do a rollup tutorial video!! By the way, Your webpack tutorial was perfect
@SwashbucklingwithCode
@SwashbucklingwithCode Жыл бұрын
Awesome. The Rollup one has been challenging for me because of all the different types of projects and tooling people use with it, but I am working at it when I can.
@patientlyunaccountable6805
@patientlyunaccountable6805 Жыл бұрын
@@SwashbucklingwithCode Your webpack tutorial was better than some paid tutorials in udemy. Start with vite, it's the most popular. Make a tutorial about how to use vite for normal static projects, (sass, js modules, etc).
@zvaIa
@zvaIa 3 күн бұрын
As a senior with over 10 years of web development experience. I'd recommend to learn webpack. Why? Some projects still use it, so its always helpful to understand the basics.
@MiadVosoughi
@MiadVosoughi Жыл бұрын
Thanks for the great videos you make. Also that Rollup video would be very helpful.
@SwashbucklingwithCode
@SwashbucklingwithCode Жыл бұрын
Good to know, and thank you.
@biodiscus
@biodiscus 11 ай бұрын
Do you know the html-bundler-webpack-plugin? This plugin allows to use any HTML template as an entry point and works like Vite. All source script and style files can be defined directly in HTML.
@SwashbucklingwithCode
@SwashbucklingwithCode 11 ай бұрын
Yup, and Vite does a whole lot more than that. But if that suits the needs of your project, fantastic.
@pawan29121991
@pawan29121991 Жыл бұрын
how do you think about rspack and bun ?
@bozidarbralic1937
@bozidarbralic1937 Жыл бұрын
Great stuf as usual, please do Vite first and then possibly Rollup, but Vite first off due to its popularity please
@kollabor8
@kollabor8 Жыл бұрын
I think I've kept to webpack as your clips helped to concrete me in, I have been thinking vite lately, but if vite is utilising esbuild and rollup, shouldn't we dip our toes into them too?
@SwashbucklingwithCode
@SwashbucklingwithCode Жыл бұрын
Glad to hear they helped. Vite doesn't reveal much of the esbuild parts for you to have to know, and you'd only need to know rollup if you start needing extra customization that Vite doesn't provide in an easier/automatic way. It's all up to your appetite and what you are doing!
@bishwajeetpandey1570
@bishwajeetpandey1570 Жыл бұрын
Why you not mentioned about parcel , is something wrong with parcel to use in 2023
@SwashbucklingwithCode
@SwashbucklingwithCode Жыл бұрын
Definitely nothing wrong with Parcel, it just isn't as popular these days as the others I mentioned. Vite is rapidly dominating the space for a general purpose build tool. I did actually mention at the end of the video that there are other great ones out there, including parcel, that I didn't get into because I was keeping it top 3 for me.
@bishwajeetpandey1570
@bishwajeetpandey1570 Жыл бұрын
@@SwashbucklingwithCode thanks 🙏for your feedback , i got your point
@emmeirather
@emmeirather Жыл бұрын
You are awesome bro!
@SwashbucklingwithCode
@SwashbucklingwithCode Жыл бұрын
nou
@KonstantynOfficial
@KonstantynOfficial 9 ай бұрын
Great comparison, thanks.
@akash-kumar737
@akash-kumar737 Жыл бұрын
Excellent video. Would you recommend learning Webpack for someone who want to really understand build tools?
@SwashbucklingwithCode
@SwashbucklingwithCode Жыл бұрын
Thank you. I think learning Webpack helps a lot with understanding them, and if you are interested in understanding bundling for libraries, or even just all the different ways you can transpile javascript, Rollup is great to study.
@sidma6488
@sidma6488 Жыл бұрын
Where is the Rollup video?😢
@solaaar3
@solaaar3 Жыл бұрын
i would love to see some courses on those three you mentionned, really interested!
@jesseeatalot
@jesseeatalot Жыл бұрын
This is awesome and helpful!
@SwashbucklingwithCode
@SwashbucklingwithCode Жыл бұрын
Sweet.
@Nurtylek
@Nurtylek Жыл бұрын
ok, then how to be if my app is using Webpack Module Federation?)
@SwashbucklingwithCode
@SwashbucklingwithCode Жыл бұрын
That's another good example of an exception, like the others I mentioned at the begging of the video. I have seen some talk around people doing module federation in Vite, though, but it doesn't seem very battle tested to me just yet.
@olegkravchenko9655
@olegkravchenko9655 Жыл бұрын
Thanks for the interesting info. If you make a tutorial about Vite, please mention about handling multi page setup. I have a small project in Vanilla JS - a few html files and a few split JS modules. Tried to use Vite make a bundle, but got only one index.html file in dist folder instead of all html files. After a quick searching I found samples with input option in Vite configuration file, but no info about output results (as it is in Webpack?). I'm going to experiment with this after finishing the project itself. But would be nice to have a good tutorial video about Vite setup.
@SwashbucklingwithCode
@SwashbucklingwithCode Жыл бұрын
I will definitely keep that in mind, ty for the suggestion. I believe the reason it might be difficult to find multi-page setup info is because the main use case for a lot of people with these tools are single page apps. For multi-page, the leading paradigm right now for JS frameworks is server-rendering so you'd just use Next.js, Astro, Remix, etc. If you have a use-case that you feel doesn't fit those, I'm interested to hear about it.
@olegkravchenko9655
@olegkravchenko9655 Жыл бұрын
​@@SwashbucklingwithCode Hi! Thanks for replying. As I said it is a Vanilla JS setup for a simple HTML-CSS website with a few pages like home page - general info, products page for all categories, separate page for one category, page for one item, about page, etc. Each page may have some logic, like a price calculator for product items with different choices, countdown for sale events on home page, and the site in general have some actions used on most pages like burger-menu and scroll to the top. Just to name a few. JS code is splitted on separate modules and compiled depending on a page they should be used. Yes, I know it can be done with frameworks, but in some cases using them is an overkill. In Webpack configuration I could write something like this to make separate JS files for each page or group of pages: entry: { main: './index.js', goods: './goods.js', search: './search.js', }, output: { filename: './js/[name].js', path: path.resolve(__dirname, 'dist'), }, index.js, goods, js, search.js are entry points for different modules, that should result in files with the same names in output directory after Webpack works on them. PS It's not a matter of death or live, just curious - maybe there is a similar setup in Vite :)
@SwashbucklingwithCode
@SwashbucklingwithCode Жыл бұрын
@@olegkravchenko9655 Thank you for the use case example. I'd honestly take a look at Astro, I don't think it is as overkill as you might think. It handles all the code-splitting functionality for you and is very light-weight.
@GauravKumar-ue7nz
@GauravKumar-ue7nz Жыл бұрын
Me halfway through your course and you dropping this Video. JK Awesome content Man.
@SwashbucklingwithCode
@SwashbucklingwithCode Жыл бұрын
I did have that on my mind when making this. The Webpack learnings from those videos will transition quite well in the Rollup and esbuild world, though.
@maxtsh
@maxtsh Жыл бұрын
We are waiting for you to make a video and dig deep into each one of them so please don't hesitate
@SwashbucklingwithCode
@SwashbucklingwithCode Жыл бұрын
Well I suppose I better double-time it then.
@Punkwart
@Punkwart Жыл бұрын
I just watched 3/4 of your Wepack video X1nxTjVDYdQ, liked it and now follow your channel too. The first recent video I see is about not using Webpack in 2023 :D
@fedordostoevskiy4209
@fedordostoevskiy4209 Жыл бұрын
👍, but only if you're freelancer. It's must have in companies.
@dyunior
@dyunior Жыл бұрын
ohh yeah
@SwashbucklingwithCode
@SwashbucklingwithCode Жыл бұрын
I've actually seen a growing number of companies adopting these newer tools, and I also think a lot of developers think they need to know Webpack when they are starting out even though they won't be the ones touching the webpack config at all. Still, I think it is a great skillset to have, just not one I would prioritize for most these days.
@fedordostoevskiy4209
@fedordostoevskiy4209 Жыл бұрын
@@SwashbucklingwithCode Really, I don't know other tools yet, but web pack in depth for production and customization is hard🤯. I hope new ones are easy. 🤘🤘🤘
@SwashbucklingwithCode
@SwashbucklingwithCode Жыл бұрын
@@fedordostoevskiy4209 It is. Every time I think I have bundling and build tooling figured out, some little thing wrecks me for hours.
@Kanexxable
@Kanexxable Жыл бұрын
Please show them the light OMG
@oortcloud210
@oortcloud210 Жыл бұрын
Another day, another client-side framework, build tool etc What ancient technology shall I purge from my brain to make room for Vite? WCF - I think its time to say goodbye.
@heyprotagonist
@heyprotagonist 11 ай бұрын
I know and use other tools... But I'm not gonna leave webpack...
@SwashbucklingwithCode
@SwashbucklingwithCode 11 ай бұрын
Cool. I think this is sufficiently covered in the intro.
@howuseehim
@howuseehim Жыл бұрын
webpack doesn't force you to use a framework vite wants you to use one
@Frank-fx8nz
@Frank-fx8nz Жыл бұрын
😃 Prⓞм𝕠𝕤𝐌
@ob34915
@ob34915 Жыл бұрын
Webpack is everywhere this is a bad advice to give specially for juniors dev
@SwashbucklingwithCode
@SwashbucklingwithCode Жыл бұрын
I can understand that perspective, but I disagree. If you know you need to learn Webpack because you are at a job where you are in charge of configuring it, then you know you need to and can do so. But most of the time newer developers are not in charge of those configs, and I don't think it is a skill that should be prioritized over others with all the advancements that have been made. Newer projects will likely use something modern because it is just easier to get the same output, and older projects have someone maintaining their configuration already. This is all coming from someone who has spent a lot of time working with Webpack and creating videos for understanding it in the past.
@holypowerenjoyer6059
@holypowerenjoyer6059 Жыл бұрын
Second coming of JSus
@SwashbucklingwithCode
@SwashbucklingwithCode Жыл бұрын
Ok, I'll give you that one.
@maksymdudyk1718
@maksymdudyk1718 Жыл бұрын
The author gives his audience a very doubtfull advice.
@alexeysamokhin9629
@alexeysamokhin9629 Жыл бұрын
The truth is that you don't need to bundle anymore in 2023. Widespread use of HTTP/2, faster connections, things like prefetching and robust browsers caching killed need for bundling.
@nickwoodward819
@nickwoodward819 Жыл бұрын
I'll have what alexey's smoking
@alexeysamokhin9629
@alexeysamokhin9629 Жыл бұрын
@@nickwoodward819 playing the fool?
@nickwoodward819
@nickwoodward819 Жыл бұрын
@@alexeysamokhin9629 If that's what you like to call it, sure
Webpack 5 CSS Walkthrough: Sass, PostCSS and more!
37:26
Swashbuckling with Code
Рет қаралды 28 М.
Why is Everyone Using Vite?
7:34
Awesome
Рет қаралды 90 М.
How Strong Is Tape?
00:24
Stokes Twins
Рет қаралды 96 МЛН
When you have a very capricious child 😂😘👍
00:16
Like Asiya
Рет қаралды 18 МЛН
Support each other🤝
00:31
ISSEI / いっせい
Рет қаралды 81 МЛН
Explains Module Bundlers in 3 Levels of Difficulty
18:35
lihautan
Рет қаралды 14 М.
Let's build a CDN - Part 2
25:35
Gerhard Lazu
Рет қаралды 258
as const: the most underrated TypeScript feature
5:38
Matt Pocock
Рет қаралды 126 М.
Creating and Understanding a Basic Webpack 5 Setup
41:49
Swashbuckling with Code
Рет қаралды 61 М.
Understanding Semantic Versioning with Real World Examples
41:17
Swashbuckling with Code
Рет қаралды 8 М.
Vite Crash Course | Faster Alternative To CRA
16:24
Traversy Media
Рет қаралды 217 М.
5 JavaScript Concepts You HAVE TO KNOW
9:38
James Q Quick
Рет қаралды 1,4 МЛН
Visual Guide to the Modern Frontend Toolchain (Vite)
9:18
Lachlan Miller
Рет қаралды 88 М.