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.
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.
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 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.
Classic RUclips 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 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
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.
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
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.
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
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.. :) 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
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.
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.
This is hands down the best development channel on RUclips. 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!
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.
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.
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
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!
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 "../".
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😎🙏
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.
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 :)❤
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 !!!
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
If you follow the demo for Webpack and you get error like this - (Uncaught SyntaxError: Invalid or unexpected token), you need to add to the script tag type="module", so essentially it will look like this:
Thank you for pointing this out! My build process ran into errors without this module. webpack documentation states to use: npm install sass-loader sass webpack --save-dev
BS Code? Haaaaahaha that was a good one. I knew a guy who worked for General Motors and he always picked up the phone saying "Welcome to Janitor Motors", until one client got him. Fun one.
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 !
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.
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.
True
Classic RUclips 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 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
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
Today I wasted my time understanding webpack with all the 2 hours courses and you explained it in what 10 minutes. Awesome dude 😎
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
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.
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.
It's sad, but I've been using these tools with never fully understanding them. Thank you for this.
Thank you SO MUCH. I have been banging my head against the wall trying to understand webpack. This made it so simple!
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.
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 don't know how I would learn to code without this channel.
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
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
I never tried to learn how to configure webpack because it seemed daunting to me. But you make it look so effortless. So quickly.
You're an underrated legend in the world of web development educators. 🔥🔥🔥
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.
0:01 The best explanation of modern web development in 60 seconds.
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.
Webpack on default minifies code. Setting "mode" to "development" reduces bundling times significantly.
Some of the best courses ever - specific topics, clear delivery, fast, everything just works! Thank you!
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
Always releasing quality videos Fireship! I get excited everytime you are in my sub box.
This is the first that I was able to comprehend module bundlers.
Man, Thanks a lot, your "over 10" minutes video clarified and highlighted more than a 2hour tutorial could. Tha k you
This is hands down the best development channel on RUclips. 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!
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! :)
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
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.
I wasn't sure what I was looking for asTS code didn't compile, but it found me :), the algorithm is getting fast.
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
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
Having "eureka" moments throughout the video! Loving it ❤️
writing this comment while waiting for the video and advertisement to finish. I always don't want to skip the ad in your video.
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!
I forget these exist tbh, thanks for reminding me how lucky I am Jeff.
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 "../".
Update (April 20, 2022): Snowpack is no longer actively maintained and is not recommended for new projects.
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😎🙏
i had been struggling with this for sooooooooo long
Thank YOU
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.
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.
Webpack, demystified! Thank you. I found solutions to past problems in that video that had so far gone unsolved.
I appreciate your teaching style. It will be more convenient for us to understand if you could slow down the script. Thanks!
Helpful... For me, your content looks like perfection..
Amazing video! Really appreciate that you showed life before and after module bundlers!
Snowpack sounds awesome!! Can’t wait to try it. Thank you!
You are one of the 4 YT channels i’ve subscribed to. Your content is perfect. 👌
Thanks for explaining these hard to get around topics in such a concise and fun way. Your videos are very helpful for beginners
Love❤️ snowpack and happy😁 that svelte💥 has inclination 🎚️ towards snowpack... ❄️
I think says a lot about their commitment to a good dev experience
yeah I just tried out snowpacks create snowpack app svelte template yesterday. I'm liking it better than the standard rollup template.
Svelte team is working as much as they can for good developer experience ... They added typescript support too.....
This video is a lesson in a BootCamp I'm attending (microverse), but I have already watched this video many times lol
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 :)❤
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
Very well summarized video on Webpack. Keep it up.!
Now that's a solid 'Men at Work' reference.
Awesome explanation . Thanks for step by step from scratch
Incredibly useful for getting started. Thank you!
you can use this will allow you to use modules directly.
1:52 gave me a good little chuckle
I use html, JavaScript and CSS. I am proud of myself. #DuckingProoMyselfOtherwise
Read with an F
Finally, I understand webpack. Great introduction!
You think you do, you do not
Your channel is a godsend.
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. 🍺👋🏾
For anyone getting errors after 8:10, use this instead:
devServer: {
static: {
directory: path.join(__dirname, 'public'),
},
compress: true,
port: 9000,
},
Thank you.
This video is simply superb, par excellence.
Very helpful, thanks for taking the time to do this!
Javascript is weird, so im happy that there are bundlers.
Dude... thank GOD for this video
Finally concepts click! Thanks a lot!
A separate showcase of Snowpack please!
OMG I WAS JUST LOOKING FOR THIS!!!! Thank you. Great content.
VanillaJS is the only framework you should ever use, you can include libraries, but make it few
Thanks for producing concise and relevant lessons!
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 !!!
"No one just uses html, css and javascript to build a website"
Me: "haha yes"
Best web dev channel.
This is one awesome video, this is my quick reference for using WebPack, thank you
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
🔥 content from fireship as always. Used webpack for several of my frontend learning projects. Learned quite a bit more here today as well.
Thank you so much for the video , I totally appreciate it, It had helped me to understand bundlers like webpack, thanks!!!
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!
ok, now we are waiting for Snowpack tutorial :)
and ty.
7:00 you also need 'npm install --save-dev node-sass' before this will work.
A video about Babel would be great ✌️
If I had this video when I started spa apps... Thanks❤
Thanks a ton sir. Got a clear picture on webpacks
If you follow the demo for Webpack and you get error like this - (Uncaught SyntaxError: Invalid or unexpected token), you need to add to the script tag type="module", so essentially it will look like this:
Solid and concise tutorial. Thanks!
I've just used snowpack and that's awesome😍
Thanks a TON for ZOOMING IN
You should "npm install node-sass" so the scss loader can compile successfully.
Thank you for pointing this out! My build process ran into errors without this module.
webpack documentation states to use: npm install sass-loader sass webpack --save-dev
What the hell is rolllup....searching.....Oh thank God Fireship has a video
Good explanation.
I got an error when I tried the example with sass because I forgot to install it. After running
npm i sass
it worked.
Wow snowpack looks awesome, i hope it is easy to migrate from webpack for huge projects, will give it a try 😅
Your videos are always so good!
BS Code? Haaaaahaha that was a good one. I knew a guy who worked for General Motors and he always picked up the phone saying "Welcome to Janitor Motors", until one client got him. Fun one.