Module Bundlers Explained... Webpack, Rollup, Parcel, and Snowpack
ฝัง
- เผยแพร่เมื่อ 21 ต.ค. 2020
- 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/codediodeio
#webdev #tutorial #javascript
Install the quiz app 🤓
iOS itunes.apple.com/us/app/fires...
Android play.google.com/store/apps/de...
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 - วิทยาศาสตร์และเทคโนโลยี
As someone starting in the web development industry, all these technologies feel so overwhelming.
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.
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... 😏
Welcome to the game
But starting out and moving forward regardless is the best thing to do. Congratulations on that :)
totally echo you !
Fireship: *Uploads a video.*
Someone in the comments: OMG I WAS JUST LOOKING FOR THIS!!!!
i swear
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.
but is true tho lol, I was just looking at WebPack
It's a time-honoured tradition!
Fireship has 460k subs, so things like that are bound to happen
I'm so glad I have notifications on; I was just trying to figure out how to use webpack! How did you know, Jeff???
That's what I do :)
It's getting spookier for Halloween
Thing is 50% of time your dealing with a bundler webpack, babel or metro for RN
Jeff has firesense 😋
It's probability. 1 out of thousands of followers is ought to do the same when the video is uploaded.
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!
@@Snerdy0867 Just use Vite, it's much simpler and faster. I'm using it in my company.
@@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.
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
},
Thank you!
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 ???
@@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
You saved me on this issue
@@goldensonu15 what worked for me is changing the contentBase to static. I read on stack overflow that's what should be used
Classic TH-cam 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!
This is hands down the best development channel on TH-cam. 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!
Some of the best courses ever - specific topics, clear delivery, fast, everything just works! Thank you!
For the record, you can use script tags with es6 Import syntax by delcaring the type as a module. i.e.
thoght the same
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
@@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
@@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
@@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
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.
Webpack on default minifies code. Setting "mode" to "development" reduces bundling times significantly.
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.
Always releasing quality videos Fireship! I get excited everytime you are in my sub box.
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
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.
Today I wasted my time understanding webpack with all the 2 hours courses and you explained it in what 10 minutes. Awesome dude 😎
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
I don't know how I would learn to code without this channel.
I never tried to learn how to configure webpack because it seemed daunting to me. But you make it look so effortless. So quickly.
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
Amazing video! Really appreciate that you showed life before and after module bundlers!
Thanks for explaining these hard to get around topics in such a concise and fun way. Your videos are very helpful for beginners
You're an underrated legend in the world of web development educators. 🔥🔥🔥
Man, Thanks a lot, your "over 10" minutes video clarified and highlighted more than a 2hour tutorial could. Tha k you
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.
Having "eureka" moments throughout the video! Loving it ❤️
It's sad, but I've been using these tools with never fully understanding them. Thank you for this.
i had been struggling with this for sooooooooo long
Thank YOU
You are one of the 4 YT channels i’ve subscribed to. Your content is perfect. 👌
Web assembly on the list?😍
WASM in 100 seconds coming soon...
@@Fireship good lord, hope it comes out in the next 100 seconds 😂 cant wait!!
@@Fireship Even though I know nothing about Javascript or web development in general, still very excited.
Incredibly useful for getting started. Thank you!
Thank you SO MUCH. I have been banging my head against the wall trying to understand webpack. This made it so simple!
Thanks for producing concise and relevant lessons!
Snowpack sounds awesome!! Can’t wait to try it. Thank you!
Very helpful, thanks for taking the time to do this!
🔥 content from fireship as always. Used webpack for several of my frontend learning projects. Learned quite a bit more here today as well.
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 :)❤
Helpful... For me, your content looks like perfection..
I was stuck for close to a week on this. Thank you! Looking forward to going back to coding now.
This is the first that I was able to comprehend module bundlers.
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!
Your channel is a godsend.
OMG I WAS JUST LOOKING FOR THIS!!!! Thank you. Great content.
Update (April 20, 2022): Snowpack is no longer actively maintained and is not recommended for new projects.
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.
Not true for NPM modules.... And for your own local JS module files, maybe sure.
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
Webpack, demystified! Thank you. I found solutions to past problems in that video that had so far gone unsolved.
More details and tutorials for Snowpack please ?
+1
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😎🙏
This video is simply superb, par excellence.
Very well summarized video on Webpack. Keep it up.!
This is one awesome video, this is my quick reference for using WebPack, thank you
Love your work!! ♥️
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.
My savior
Thank you, I was confused with this one.
Lifesaver.
Finally, I understand webpack. Great introduction!
You think you do, you do not
Solid and concise tutorial. Thanks!
I forget these exist tbh, thanks for reminding me how lucky I am Jeff.
Finally concepts click! Thanks a lot!
Clean explanation. Thank you.
ok, now we are waiting for Snowpack tutorial :)
and ty.
Thanks for the great content Mr Fireship.
thanks dude your content is fresh and awesome as always
writing this comment while waiting for the video and advertisement to finish. I always don't want to skip the ad in your video.
Thank you, this came at the right time 👌
Your videos are always so good!
Very informative and well made video - thank you!
Thanks a ton sir. Got a clear picture on webpacks
You killed it. Thanks man
I wasn't sure what I was looking for asTS code didn't compile, but it found me :), the algorithm is getting fast.
Dude... thank GOD for this video
Great content, very valuable info.
I've just used snowpack and that's awesome😍
If I had this video when I started spa apps... Thanks❤
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.
very helpful for starting
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
yeahhhhh
Thank you so much ! That was a great help!
Perfect timing 👌
Thanks man, this was very helpful.
Thank you so much for the video , I totally appreciate it, It had helped me to understand bundlers like webpack, thanks!!!
You guys are so awesome!
Great video tbh! I really appreciate it brother!
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
Thank you for saving me time trying to figure this out! :D
Thank you!
As usual, you lead us forward
amazing video! thanks a lot.
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. 🍺👋🏾
Thanks a TON for ZOOMING IN
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 !!!
0:01 The best explanation of modern web development in 60 seconds.
awesome! thank you so much
1:52 gave me a good little chuckle
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.
im doing an intro talk on this and using this tutorial as a guide... you have absolutely saved my life
Thank you! :)
Excellent. Thank you.
Well explained 👏
you are a life saver!
Wow snowpack looks awesome, i hope it is easy to migrate from webpack for huge projects, will give it a try 😅
Best web dev channel.
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
Now that's a solid 'Men at Work' reference.
This video is a lesson in a BootCamp I'm attending (microverse), but I have already watched this video many times lol