Module Bundlers Explained... Webpack, Rollup, Parcel, and Snowpack

What is a Module Bundler? And why do I need one? Learn how tools like Webpack, Rollup, Parcel, and Snowpack can package your code as a production-ready web application. fireship.io
Webpack webpack.js.org/
Snowpack www.snowpack.dev/
Sponsor me for $1 github.com/cod...
#webdev #tutorial #javascript
Install the quiz app 🤓
iOS itunes.apple.c...
Android play.google.co...
Upgrade to Fireship PRO at fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
My VS Code Theme
Atom One Dark
vscode-icons
Fira Code Font

[@AshesOfEther]

Fireship: *Uploads a video.* Someone in the comments: OMG I WAS JUST LOOKING FOR THIS!!!!

[@bouzianeamine8815]

i swear

[@iRIDS]

I just started using snowpack with svelte yesterday and I was looking for something like this, that compares the different options. The algorithm sees all.

[@azatecas]

but is true tho lol, I was just looking at WebPack

[@gonefishing7]

It's a time-honoured tradition!

[@StrangeIndeed]

Fireship has 460k subs, so things like that are bound to happen

[@josueem14]

As someone starting in the web development industry, all these technologies feel so overwhelming.

[@lohar5055]

If you are just starting out than just stick to HTML, CSS, Javascript. And really these are the hardest of the web dev learning curve. When your little project starts to get bigger and somewhat complex, take on a framework like React, or Vue. Learning a framework and the techs that surround it are really easy. Because the the majority of your time is spent learning better approaches to a problem and becomming a better programmer. Again these techs and their names may sound overwhelming but are really easy to pick up.

[@thuggfrogg]

The internet is a million hacks duct-taped together with js. I bet we could simplify it all if we just replaced js with Scheme-in-the-browser... 😏

[@crashito_x]

Welcome to the game

[@letthedevscook]

But starting out and moving forward regardless is the best thing to do. Congratulations on that :)

[@shellyyang1916]

totally echo you !

[@estelagartija4149]

It literally took me 6 hours to watch the video and follow the steps and breaking my pc and braking my head but it was worth it. Thanks for taking us by the hand.

[@naturesdip]

Configuring Webpack from scratch for enterprise scale projects has been one of my best skill investments. It honestly feels like 90% of previous struggles have been due to bad project configs. Thank you so much for this video!

[@ArtonnX]

@@Snerdy0867 Just use Vite, it's much simpler and faster. I'm using it in my company.

[@mrgalaxy396]

​@@Snerdy0867 Honestly just read the bundler's docs. It might take you a few hours but it will give you an overview of everything you can use in it and how to use it.

[@MarkVonBaldi]

True

[@ionitaa]

Classic KZbin tutorial... First 5 steps (that are obvious to everybody) explained in detail, the next 3 (slightly harder steps) glanced over and the following 100.000 hard steps are not even addressed. There is no shortcut around the grind. Read the docs and and put aside a few days for learning webpack. 6 months from now when they ship a new major release you'll do it i all over again and you'll love it!

[@jvcmarc]

this channel is my gateway into the world of webdev! always when I'm confused about a subject such as docker, webpack, or anything like that, a new video comes out that helps me get started

[@michaelokellomykfrost]

SIMPLY AMAZING. I understood all this in a 10 minute video. NO complicated stuff. straight to the point. Thank you bro

[@BigGingerJake]

I've been watching these tutorials for a while now, and I continue to be blown away by how much value you are able cram into each short video. The quality and conciseness that your style delivers is just brilliant, and imho fits perfectly in line with what your target audience desires. I'd just like you to know that you are doing a phenominal job, and I've decided to sign up for full membership. Thank you for your hard work and amazing content.

[@adipradhan3506]

Today I wasted my time understanding webpack with all the 2 hours courses and you explained it in what 10 minutes. Awesome dude 😎

[@london5679]

For the record, you can use script tags with es6 Import syntax by delcaring the type as a module. i.e.

[@amaury_permer]

thoght the same

[@Dev-Siri]

This works but the browser is not able to resolve the import if you do like: import lodash from 'lodash'; this doesn't work since it doesn't know to look into the node_modules folder. So you have to manually locate the package like this: import lodash from './node_modules/lodash'; and if it uses commonjs, ie the require() function instead of `import` and `export` then well, it won't work either. The commonjs `require()` function is not defined in the browser

[@bmfitzgerald3]

@@Dev-Siri I also wonder, when importing manually, that even if you supply the path to the package './node_modules/lodash' ... I wonder if the browser would have trouble if lodash itself had its own dependencies which it needed to find. Perhaps a non-issue, but I haven't set up a test yet

[@Dev-Siri]

​@@bmfitzgerald3 yea its possible. Since even if we supply the path to the browser, it would still be confused as it won't look outside the lodash folder and in the node_modules again. Source Code -----------------------|--------------------- IMPORT ./node_modules/lodash | Some Dependency

[@Raidar29]

@@Dev-Siri exactly, and it also won't work if the dependency has it's own module identifier. e.g './node_modules/chart.js/dist/chart.js' could work but inside of the chart.js file theres a strange import: import '@kurkle/color' It took me a while to figure all this out, now i'm here trying to understand bundlers so i can get chartjs to work

[@gonefishing7]

I'm so glad I have notifications on; I was just trying to figure out how to use webpack! How did you know, Jeff???

[@Fireship]

That's what I do :)

[@FalseDev]

It's getting spookier for Halloween

[@cryptonative]

Thing is 50% of time your dealing with a bundler webpack, babel or metro for RN

[@aj.arunkumar]

Jeff has firesense 😋

[@VinitKhandelwal]

It's probability. 1 out of thousands of followers is ought to do the same when the video is uploaded.

[@spuish]

Thank you SO MUCH. I have been banging my head against the wall trying to understand webpack. This made it so simple!

[@simulation3120]

I don't know how I would learn to code without this channel.

[@mathiasdeweerdt1400]

Love the video, 3 small issues with the video though. - You have to install sass aswell and not only the loaders * npm install --save-dev sass - You used the scss variable "$color" but u defined "$text". - Add publicPath to devServer so it should like this: devServer: { publicPath: '/dist', contentBase: path.join(__dirname, 'public'), port: 9000 },

[@JackEatock]

Thank you!

[@goldensonu15]

Thank you.. :) I have written like, devServer : { publicPath: '/dist', contentBase : path.join(__dirname, 'public'), port : 9000 } still, I see this error >>> "Invalid options object. Dev Server has been initialized using an options object that does not match the API schema. - options has an unknown property 'contentBase'. Coz of this dev-server is not serving the page.. Any tips please ???

[@vjzb3]

@@goldensonu15 from looking closely at the error it gave you, it looks like the contentBase key is not named correctly. You might scratch your head at this, because you see everyone else using contentBase - so the next step is to google 1 of 2 things: either “webpack contentBase not working” or something along those lines to see if anyone else has gotten this error (which will show you other people indeed have ran into this error and have also shared the solution), or if you’re a little more comfortable with the idea of API’s you might think do go directly to the Webpack documentation for the devServer object so that you can see all of the fields it accepts. The first of those two showed me what new field name belongs there, and the second google search helped me confirm that it appears in Webpack 4 the field was called “contentBase”, but now in Webpack 5 they are calling that field “static” and contentBase is no longer a valid field name. So you must have webpack version 5.x installed and it’s just telling you the schema for devServer has changed and that contentBase is no longer a valid field name. For all the options for devServer you can just google something like “webpack devServer” and the top link should take you to the official docs at webpack.js.org In the beginning, everything can be overwhelming so even though your console gave you a pretty actionable and clear error message, it’s totally normal to feel like you don’t know what to do next. This is basic debugging skills, but it can take a while to build the experience and intuition that makes these steps very obvious to you. You’re doing great

[@abhishekjangid6695]

You saved me on this issue

[@benkiarie149]

@@goldensonu15 what worked for me is changing the contentBase to static. I read on stack overflow that's what should be used

[@vadityag]

This video is perfect in delivery. It doesn't bore people who are familiar with part of the stuff and it is very useful for beginners.

[@ChiCity511]

The reason you get the error at 3:28 is actually because you haven't specified type="module" in your script tag. You still can't do bare imports even after that but thats a separate issue.

[@davidezih3510]

Not true for NPM modules.... And for your own local JS module files, maybe sure.

[@lohar5055]

Webpack on default minifies code. Setting "mode" to "development" reduces bundling times significantly.

[@AnantaAkash.Podder]

It is one of the Finest if Not the BEST Explanation for Web Bundlers... I learned about HTML & CSS many years ago, yet I didn't know about the Concept of Web Bundlers

[@cpaez2000]

3:23 this error "cannot use an import outside a module" is because you need to write "type="module"" inside script tag and you need a node server like "live server" to use modules. Anyway the error that you will have is "failed to resolve module specifier "lodash". Relative references must start with either "/", "./", or "../".

[@Marceloamado1998]

This video is gold! in 4minutes I managed to understand what it was, why is it good, and how to use it. Thank you sir

[@CodingWithLewis]

Always releasing quality videos Fireship! I get excited everytime you are in my sub box.

[@zoaybk]

I never tried to learn how to configure webpack because it seemed daunting to me. But you make it look so effortless. So quickly.

[@amnaatarapper]

Every time I come across one of this guy's video I end up learning a new skill... thank you man keep the great work going

[@palikircis5877]

This is a very good one and I really appreciate it. By the way if someone had an error like this "PostCSS received undefined instead of CSS string". Try installing also as Dev Dependencies sass aside from sass-loader and you will be fine. Also contentBase for dev server is deprecated and thus change with the word static instead.

[@mannymedina1132]

My savior

[@sonyuinthesky]

Thank you, I was confused with this one.

[@jameswinston5369]

Lifesaver.

[@PenguinjitsuX]

This is hands down the best development channel on KZbin. The videos are succinct, perfectly to the point, and extremely useful. I've probably watched over 50 videos so far and every single one has been useful!

[@JordanAF808]

0:01 The best explanation of modern web development in 60 seconds.

[@speckyferns6780]

Some of the best courses ever - specific topics, clear delivery, fast, everything just works! Thank you!

[@thinkeneering]

As of 2023, I was getting an error about missing sass at 7:01. If this happens to you, what you can do is update your style loaders by typing the following on the command line: npm install --save-dev style-loader css-loader sass sass-loader

[@incrypted607]

Thank you for saving me time trying to figure this out! :D

[@PurpleyBlueDuck]

Thank you!

[@javierperez5567]

Thanks!

[@EmJiMadhu]

Dude, seriously. You are literally the best!!! You give insights about something in few minutes. Most of the time, most developers want is to learn something quickly! Yes it might sound like a joke. But its true. How many of you skipped video just to learn the important part!!!! We all did. And he (i am really soory. I forgot your name the guy who made this video. I am following you since you "were" part of firebase. I Still remeber those videos you made for firebase!!), just gives you the important stuff!! Trust me when you are a developer and you didnt have the time to go through the whole video, you skip. Thank you sooo much dude! And all his videos, its not just learning but fun and jokes!!! For example "Heaviest object in the universe"? Dude that was awesome!!!! I laughed the hell out!!!!!!!! It is fun learning with you. And i swear when i get my next job i will definitly donate you dude!!! Seriously i will. Because you desrve it!! Thanks and Peace!

[@ray_bags]

Man, Thanks a lot, your "over 10" minutes video clarified and highlighted more than a 2hour tutorial could. Tha k you

[@epremier20050]

I've never been so happy to see this video finally be made because I was spending months trying to figure out how the heck bundlers are integrated into a project and I'm so glad to see how it goes in depth.

[@smohammeds]

You're an underrated legend in the world of web development educators. 🔥🔥🔥

[@darkwoodmovies]

It's sad, but I've been using these tools with never fully understanding them. Thank you for this.

[@danimunf]

I really love this, I'm new js environment, so I've been watching a lot of your videos and thanks God i learn a lot. Now I'm confident enough to build my own portfolio and start my journey on js

[@Dylan_thebrand_slayer_Mulveiny]

Been a dev a long time. Back in "the day" we just wrote sites with jQuery, css and html. I cannot imagine going back to that. I

[@kristijanross977]

yeahhhhh

[@JC-jz6rx]

i had been struggling with this for sooooooooo long Thank YOU

[@anmoldewan527]

Having "eureka" moments throughout the video! Loving it ❤️

[@Wakkyguy]

This is the first that I was able to comprehend module bundlers.

[@TamDNB]

I forget these exist tbh, thanks for reminding me how lucky I am Jeff.

[@sauravkumarjha2838]

Helpful... For me, your content looks like perfection..

[@scott2574]

Update (April 20, 2022): Snowpack is no longer actively maintained and is not recommended for new projects.

[@eighties8]

For anyone getting errors after 8:10, use this instead: devServer: { static: { directory: path.join(__dirname, 'public'), }, compress: true, port: 9000, },

[@PurpleyBlueDuck]

Thank you.

[@vatsalpatel3669]

Really really really simple and best video I was thinking to take course for learning webpack but you just did it in 9 mins thanks bro you are awesome one of the best channel I have subscribed from my account😎🙏

[@vaniad555]

I wasn't sure what I was looking for asTS code didn't compile, but it found me :), the algorithm is getting fast.

[@swoorp]

You're a great person, I saw something named as WebPack, fortunately, I had your notifications on and theres no problem now... Loved the tutorial! Thanks Jeff :)❤

[@Peter-ur8nv]

You are one of the 4 YT channels i’ve subscribed to. Your content is perfect. 👌

[@bmejia220]

Snowpack sounds awesome!! Can’t wait to try it. Thank you!

[@kevindandrade4016]

I'm new to Bundlers and I gotta say your explanation and demos here were way easier to understand..Even ChatGPT sucked for this topic

[@vuelancer]

writing this comment while waiting for the video and advertisement to finish. I always don't want to skip the ad in your video.

[@timeowilliams4620]

Amazing video! Really appreciate that you showed life before and after module bundlers!

[@pauldill8368]

Webpack, demystified! Thank you. I found solutions to past problems in that video that had so far gone unsolved.

[@muhammadsami479]

Web assembly on the list?😍

[@Fireship]

WASM in 100 seconds coming soon...

[@Brunoenribeiro]

@@Fireship good lord, hope it comes out in the next 100 seconds 😂 cant wait!!

[@albertbennett6290]

@@Fireship Even though I know nothing about Javascript or web development in general, still very excited.

[@NikhilKumar-im8ls]

Thanks for explaining these hard to get around topics in such a concise and fun way. Your videos are very helpful for beginners

[@codegully_channel]

Very well summarized video on Webpack. Keep it up.!

[@feelwang]

For anyone really care to follow: 1 install sass 2 change $text to $color in sass. 3 After dev server, change to src=“main.js” because wdv does not output anything. Still, great work.

[@thomaslukasiewicz7026]

im doing an intro talk on this and using this tutorial as a guide... you have absolutely saved my life

[@BrUSomania]

Thank you! :)

[@stickzman]

Your channel is a godsend.

[@okbrown]

Definitely the best Bundler tutorial/guide for Webpack to date. I would go as far as to say better than the horrid docs they provide too. 🍺👋🏾

[@nallidremylc]

Love the content. I’ve always heard of webpack but now I’m starting to use it I needed the guidance. Thanks for the information

[@KevinVandyTech]

I recently had to learn all this when building our own component library. We use Rollup and Babel, and it works, but we're probably still doing a lot of things wrong.

[@RianY2K]

More details and tutorials for Snowpack please ?

[@artgreg2296]

+1

[@pavithraraghav1256]

Awesome explanation . Thanks for step by step from scratch

[@jackmaison4209]

Finally, I understand webpack. Great introduction!

[@Nexus-rt1bm]

You think you do, you do not

[@dannygarcia8012]

Very helpful, thanks for taking the time to do this!

[@patmuller8992]

Incredibly useful for getting started. Thank you!

[@lukasluftlaufer1093]

Finally concepts click! Thanks a lot!

[@pging8328]

This video is simply superb, par excellence.

[@AnteZivkovic]

7:00 you also need 'npm install --save-dev node-sass' before this will work.

[@ridl27]

ok, now we are waiting for Snowpack tutorial :) and ty.

[@ReadieFur]

1:52 gave me a good little chuckle

[@jonwakefield813]

Dude... thank GOD for this video

[@Maxim86]

Now that's a solid 'Men at Work' reference.

[@ivonnebenites3308]

Thank you so much for the video , I totally appreciate it, It had helped me to understand bundlers like webpack, thanks!!!

[@nastygambler2522]

Love❤️ snowpack and happy😁 that svelte💥 has inclination 🎚️ towards snowpack... ❄️

[@Fireship]

I think says a lot about their commitment to a good dev experience

[@iRIDS]

yeah I just tried out snowpacks create snowpack app svelte template yesterday. I'm liking it better than the standard rollup template.

[@nastygambler2522]

Svelte team is working as much as they can for good developer experience ... They added typescript support too.....

[@thedevilffs]

I'm a backend dev and haven't been in the FE-loop for some years. The video explains how to solve the problem of using TS, React, and Sass. But, why not, you know, use JS, HTML, and CSS and avoid the problem from the beginning? What are the benefits of having this complicated setup?

[@skandiaart]

Speed (it’s easier to make a project in react and than in plain ol js), safety and ease of use

[@paulwhiterabbit]

scalability and maintainability

[@RoyerAdames]

OMG I WAS JUST LOOKING FOR THIS!!!! Thank you. Great content.

[@shasherazi]

This video is a lesson in a BootCamp I'm attending (microverse), but I have already watched this video many times lol

[@albertchung7641]

Your videos are always so good!

[@sachindraragul1094]

You killed it. Thanks man

[@JimmyS2]

This is one awesome video, this is my quick reference for using WebPack, thank you

[@nickeax]

Thanks for producing concise and relevant lessons!

[@wontonfuton]

🔥 content from fireship as always. Used webpack for several of my frontend learning projects. Learned quite a bit more here today as well.

[@DalexHD]

Love your work!! ♥️

[@omegawolfe1]

U made me start learning programming..... i can't understand shit but it's okey .... if i keep trying one day I'll understand fully ur vids

[@maskman4821]

pretty awesome tutorial about webpack, now snowpack is out and performs much better than webpack, so it is time to expect a great snowpack tutorial coming out !!!

[@MohdRusmanAriefARahman]

Thanks for the great content Mr Fireship.

[@UltimateOstrichRider]

Solid and concise tutorial. Thanks!

[@codingblocks3495]

thanks dude your content is fresh and awesome as always

[@augusto256]

Best web dev channel.

[@glimpsee7941]

As usual, you lead us forward

[@souravsinha5330]

Thanks a ton sir. Got a clear picture on webpacks

[@bas_kar_na_yar]

At 3:28 the explanation is wrong. The browser does know where the file is and also knows where to find it. The reason the error is thrown is that the browser by default read it in ES5 syntax which does not support `import` or `export`. Then, webpack is used to bundle dependencies into a single ES5 cross-browser compatible file which is then imported. But as browser support for ES6 has improved you can the file by adding type="module" in the script tag without the need for webpack, for a project like this.

[@leonardosalazar5818]

Just wanted to say that Chrome do understand ES6 "import" (not sure about other browser). The problem for this is that if you don't use webpack, you will need to specify the exact relative path. So you can't simply use `from "lodash"`, instead you should use `from "../node_modules/lodash/lodash.js"` or something like that. It's because is Webpack the one who resolves the dependencies. Without it, you should specify manually. Anyway, you don't use Webpack just because the imports, right? (:

[@EnglishRain]

Thanks a TON for ZOOMING IN

[@lifeisbeautifu1]

Clean explanation. Thank you.

[@thesuperyou2829]

you can use this will allow you to use modules directly.

[@ang3loux]

You guys are so awesome!

[@AbdulRaheemDumrai]

I appreciate your teaching style. It will be more convenient for us to understand if you could slow down the script. Thanks!

[@fullStackInKannada]

Very nicely explained, thank you :)

[@JohnJohnson-ds4ui]

Perfect timing 👌