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

I see a lot of people early in their JavaScript journey learning Webpack and I really don't think that is the optimal path for most developers in 2023. In this video I talk about why that is, and what some great alternatives are that will get you pushes websites and apps out the door much faster and with less hassle.
~~~~~~
00:00 - Why you shouldn't learn Webpack
02:04 - #1 build tool for ease of use: Vite
02:42 - Vite - what using Vite looks like
03:09 - Vite - disclaimer about type checking
03:33 - Vite - ES module and HMR features
04:20 - Vite - esbuild and Rollup used to bundle
05:05 - Vite - leveraging rollups plugin ecosystem
05:43 - Vite - feature detection without configuration
06:36 - Vite - summary
06:48 - #2 The fast, low-level, build tool: esbuild
07:20 - esbuild - docs and starting commands
08:02 - esbuild - some potential downsides
08:29 - esbuild - what using esbuild looks like
09:24 - esbuild - summary and cautions
10:49 - #3 The build tool for libraries: Rollup
11:01 - The difference between an app and a library
11:38 - Rollup - why I use it for my libraries
12:18 - Rollup - disclaimer on the difficulty curve
12:47 - Rollup - what using rollup looks like
13:33 - Rollup - powerful plugin ecosystem
13:51 - Which to choose and honorable mentions
14:49 - Final note: you might not need a build tool at all
~~~~~~
Follow Jimmy Cleveland's doings:
twitter: / jimmydcleveland
blog: blog.jimmydc.com/
#js #bundlers

[@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.

[@user-sd5le3tl7n]

thanks too much for clearly introduction! Looking forward to your rollup course

[@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]

Superb feedback, thank you.

[@MiadVosoughi]

Thanks for the great videos you make. Also that Rollup video would be very helpful.

[@SwashbucklingwithCode]

Good to know, and thank you.

[@user-nt7tm4iw3t]

Please do a rollup tutorial video!! By the way, Your webpack tutorial was perfect

[@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]

@@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).

[@solaaar3]

i would love to see some courses on those three you mentionned, really interested!

[@user-cp4ie8zq4b]

What is the esbuild plugin for legacy browsers that you mention? :)

[@najmantube]

A Vite tutorial would be great! I followed your webpack tutorial - very good!

[@SwashbucklingwithCode]

I'm cooking one up now, along with the other tools I mentioned.

[@najmantube]

@@SwashbucklingwithCode Great! Looking forward to it :)

[@KonstantynOfficial]

Great comparison, thanks.

[@jesseeatalot]

This is awesome and helpful!

[@SwashbucklingwithCode]

Sweet.

[@bozidarbralic1937]

Great stuf as usual, please do Vite first and then possibly Rollup, but Vite first off due to its popularity please

[@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]

Stop embarrassing me.

[@user-rm3yh7wn9q]

You are awesome bro!

[@SwashbucklingwithCode]

nou

[@pawan29121991]

how do you think about rspack and bun ?

[@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]

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!

[@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]

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]

​@@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]

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

[@akash-kumar737]

Excellent video. Would you recommend learning Webpack for someone who want to really understand build tools?

[@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.

[@GauravKumar-ue7nz]

Me halfway through your course and you dropping this Video. JK Awesome content Man.

[@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.

[@biodiscus]

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]

Yup, and Vite does a whole lot more than that. But if that suits the needs of your project, fantastic.

[@maxtsh]

We are waiting for you to make a video and dig deep into each one of them so please don't hesitate

[@SwashbucklingwithCode]

Well I suppose I better double-time it then.

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

[@Nurtylek]

ok, then how to be if my app is using Webpack Module Federation?)

[@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.

[@bishwajeetpandey1570]

Why you not mentioned about parcel , is something wrong with parcel to use in 2023

[@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]

@@SwashbucklingwithCode thanks 🙏for your feedback , i got your point

[@fedordostoevskiy4209]

👍, but only if you're freelancer. It's must have in companies.

[@dyunior]

ohh yeah

[@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]

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

@@fedordostoevskiy4209 It is. Every time I think I have bundling and build tooling figured out, some little thing wrecks me for hours.

[@sidma6488]

Where is the Rollup video?😢

[@Kanexxable]

Please show them the light OMG

[@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.

[@howuseehim]

webpack doesn't force you to use a framework vite wants you to use one

[@Frank-fx8nz]

😃 Ｐｒⓞм𝕠𝕤𝐌

[@heyprotagonist]

I know and use other tools... But I'm not gonna leave webpack...

[@SwashbucklingwithCode]

Cool. I think this is sufficiently covered in the intro.

[@holypowerenjoyer6059]

Second coming of JSus

[@SwashbucklingwithCode]

Ok, I'll give you that one.

[@ob34915]

Webpack is everywhere this is a bad advice to give specially for juniors dev

[@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.

[@maksymdudyk1718]

The author gives his audience a very doubtfull advice.

[@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]

I'll have what alexey's smoking

[@alexeysamokhin9629]

@@nickwoodward819 playing the fool?

[@nickwoodward819]

@@alexeysamokhin9629 If that's what you like to call it, sure