This was a GREAT introduction - most things I've seen on Webpack have covered the How very thoroughly but spent less time on the Why, which is really the most important thing. Thanks!
for some reason this showed up in my GoogleNow feed and i'm glad i watched it.i find webpack documentation to be unforgiving for beginners, so thanks for putting the effort into making this , and i'd love to see more advanced webpack topics covered in future videos.
Great video! Well-spoken, good editing, helpful visualizations. Thanks to all for making it, I've been trying to understand webpack for awhile, and now I have what I need to get started.
Hello, thank you very much for showing this, it is one of the best videos on webpack that I have seen. I wish you would slow down a little bit and go a little deeper. Keep making these videos and I think you'll be doing very good here on You Tube! Thank you for this.
Wow. this is the video i've been looking for -- everything I've seen about webpack made it sound so complicated and turned me away. Now I'm sold. I do wonder how you can generate two bundle files though? as I have two different pages in my site. also a gotcha that took me awhile to find (when loading semantic-ui over webpack) was that the short name loaders "css" and "url" both through odd errors in webpack. Turns out it was a name collision and you should always use the full `css-loader` and `url-loader` loader names to avoid this. Great video though, looking forward to more!
That's the best Webpack intro I've seen so far. I really hope for more advanced Webpack related topics once 2.x is released ;) 2 questions: - what editor and plugin are you using for opening files by clicking their path names? - any chances to enable "community-contributed subtitles" to allow others to provide subtitles in other languages for your videos, at least for the free ones?
Thanks for such a clear and informative intro to Webpack. I've gone through the official Getting Started docs but this is so much better. Looking forward to watching the Webpack 2 video.
This guy literally invented styled-components!! Such high quality content, would be great to see more of it! I notice he hasn't uploaded in a few years?
bundle splitting would be nice. even for webpack 1. Your video is great, but i can't move forward because I have two js files that can't be combined easily. edit: was easy, the vendor was a little tricky, but I figured it out: webpack.github.io/docs/code-splitting.html#split-app-and-vendor-code
Just subscribed, that was a really good tutorial. Please keep this up! Would love to see more details of webpack and also babel and learn how/why things work.
Really well made tutorial Glen. This helped me understand why people are flocking to Webpack. Excited to see the Webpack 2 videos. In the meantime, please consider doing a screencast on CSS Modules. Also, what are your thoughts on Rollup? It already has treeshaking and seems to output cleaner. Are we all just sticking with Webpack because it's popular/has the most third party packages?
The style of this video is absolutely excellent! If you don't mind me asking, what tools do you use to create your block diagrams ? I unabashedly want to emulate it. They are really clean.
I know this is an example, and a basic one at that, but for most Webpack things you post in this video, simply bundling and uglifying your code can be achieved with gulp and uglify/concat as well. I think for most sites webpack is overkill. Especially since some use it for AngularJS and webapps of which you only open the main page and not really switch page that the server is rendering. As in: you pretty much need to load the same stuff anyways. And of course having a short loading time is nice, but for most webapps i've been making the loading time isn't really that important (like 1.2 vs 1.4 seconds with only the page you need vs all pages are in cache) apart from simply uglifying, combining and removing anything you won't be using anyways. People won't mind loading a bit if its some kind of user-portal (which Angular does well). Not to mention that Webpack really benefits from a nodejs server and doesn't really work well if you make them as static resources. Anyways, the tutorial was nice and i'm going to follow to see if i can learn a thing or two...
I built plenty of single page apps and have steadily migrated from grunt, to gulp to webpack. The tree-shaking is especially nice in Webpack because I save a tonne of space on NPM imported libraries, compared to just including the whole minified lib.
Putting all those images, styles and etc in one file is good for loading speed increasing if to compare it with non bundling version in first time loading. But in case of non bundling approach all those resources will be cashed and will not consume network next times. Also assume now that we have several pages which use same resources, then if you not bundle then overall speed of navigating through the pages will be faster then bundling version. Seems that bundling is controversial approach. It may give benefits in some cases and in other case will not. So after all does this additional complexity with bundling everything in one file even worth?
It would be useful to show how to get your web site rendered via localhost:8080. I think people would like to follow along and we seem to be missing a step
yes everything! pls! Webpack is def the future...if not a variant of it...asynchronous bundling def is the way to go....which is a fancy way of saying pre-pro cessing browser engine I suppose.
also, you can slow down and go a bit deeper, im a bit familiar with webpack, but if this was my first tutorial , I 'd be asking lot's of questions I guess
Front End Center have the best tutorials on front-end topics! This one especially makes webpack look like it's really easy to use.
This was a GREAT introduction - most things I've seen on Webpack have covered the How very thoroughly but spent less time on the Why, which is really the most important thing. Thanks!
for some reason this showed up in my GoogleNow feed and i'm glad i watched it.i find webpack documentation to be unforgiving for beginners, so thanks for putting the effort into making this , and i'd love to see more advanced webpack topics covered in future videos.
Great video! Well-spoken, good editing, helpful visualizations.
Thanks to all for making it, I've been trying to understand webpack for awhile, and now I have what I need to get started.
This is a fantastic video. The fact that moving the script tag to the head fixes it is interesting!
EVERYTHING NEXT PLEASE!
THE webpack introduction. Just great, thx!
Hello, thank you very much for showing this, it is one of the best videos on webpack that I have seen. I wish you would slow down a little bit and go a little deeper. Keep making these videos and I think you'll be doing very good here on You Tube! Thank you for this.
Amazing video! Perfect voice over and nice pace. Keep rolling out quality like this, and your subscribers will flock & the web will get better.
Best concepts into practice + tutorial available so far! Look forward to ongoing videos.
Wow. this is the video i've been looking for -- everything I've seen about webpack made it sound so complicated and turned me away. Now I'm sold. I do wonder how you can generate two bundle files though? as I have two different pages in my site.
also a gotcha that took me awhile to find (when loading semantic-ui over webpack) was that the short name loaders "css" and "url" both through odd errors in webpack. Turns out it was a name collision and you should always use the full `css-loader` and `url-loader` loader names to avoid this.
Great video though, looking forward to more!
This is the second subscribe for me in terms of JavaScript. Thanks for supporting the community mate.
Loved the episode! Thorough, thoughtful, and easy to follow. Looking forward to more to come!
That's the best Webpack intro I've seen so far. I really hope for more advanced Webpack related topics once 2.x is released ;)
2 questions:
- what editor and plugin are you using for opening files by clicking their path names?
- any chances to enable "community-contributed subtitles" to allow others to provide subtitles in other languages for your videos, at least for the free ones?
Thanks for such a clear and informative intro to Webpack. I've gone through the official Getting Started docs but this is so much better. Looking forward to watching the Webpack 2 video.
this channel is a gem !
Very clear and simple explanation! Looking forward to future videos!
Great video. I would be grateful if you continue with more videos on webpack. Thanks
This guy literally invented styled-components!! Such high quality content, would be great to see more of it! I notice he hasn't uploaded in a few years?
Amazing video! Thank you for the clear intro to Webpack! Would love more Webpack videos!
Great intro to Webpack! CSS and image loading in particular.
This is what you call a GREAT presentation. i can only say wow.
Great video... would love to see tutorials on the topics mentioned at the end. Especially Hot module replacement and bundle splitting. Thanks!
I would love to see more on this series!
Thanks for the great and clear introduction!. Will be keeping an eye on the channel to see future additions!
Bundle Splitting next, please.
Will do, but that API is changing up with Webpack 2, so I'm going to wait until that's out & bedded in and then do a follow up to this one.
bundle splitting would be nice. even for webpack 1. Your video is great, but i can't move forward because I have two js files that can't be combined easily.
edit: was easy, the vendor was a little tricky, but I figured it out: webpack.github.io/docs/code-splitting.html#split-app-and-vendor-code
Great intro video! I had always been put-off webpack after hearing things about it online but now I actually want to give it a go, thanks.
Best Webpack video I've seen. Good job
Great video with very clear explanations! Thanks
Just subscribed, that was a really good tutorial. Please keep this up! Would love to see more details of webpack and also babel and learn how/why things work.
Really well made tutorial Glen. This helped me understand why people are flocking to Webpack. Excited to see the Webpack 2 videos. In the meantime, please consider doing a screencast on CSS Modules. Also, what are your thoughts on Rollup? It already has treeshaking and seems to output cleaner. Are we all just sticking with Webpack because it's popular/has the most third party packages?
Gidyup! Absolutely great video. I've subscribed and encourage you guys to keep doing this amazing job.
A great video, so well explained. Any chance of a follow-up?
Very well explained, immediately subscribed, looking forward to more.
Great video.
This was a really good video. Thanks for breaking this down.
Great video. We need more. Thanks a lot.
Great video. Even though I have used webpack before and I'm familiar with it I enjoyed your explanation.
Great video. Great tempo and style.
Keep up the good work mate! Looking forward to future episodes.
Thank you so much! Really down to earth and relevant.
Hey Glen, kudos for your videos. Good looking and very informative!
Bundle splitting is one of the complicated thing. Could you do video on that?
I think one of the better ways to deal with that CSS flashing is to use ExtractTextPlugin with the CSS and then put that CSS back into the head.
Yep, definitely the way to go once you hit a certain size.
The style of this video is absolutely excellent! If you don't mind me asking, what tools do you use to create your block diagrams ? I unabashedly want to emulate it. They are really clean.
Great Video!! More webpack please
Thanks for the good intro guys. Keep up the good work :)
Thank You for this video! Awesome!
I want more! really enjoyed the video :)
Amazing primer on Webpack!!
But, 2 months and no videos, please upload more
I'd Love to see more about this!
Great video... keep them coming!
what's the editor at 1:18 and the terminal app at 1:01 ? Thanks!
looks like atom then hyper
webstorm and (likely) iterm
Sup Glen, which font are you using in both editor and console? Thanks!
Awesome explanation! When are we going to see new videos on webpack?
Excellent video. Thank you
Very informative video. Thank you.
dude, your videos are just awesome. Thanks for sharing! :)
Well done. Thanks for sharing.
Great video and explanations.
love the tricks you show
I am using requireJS for my dependency management. What are the benefits of Wepback compared to RequreJS? Question for those who used both.
This is excellent! Super informative.
Great Video ! Can you make a video/playlist for React testing ?
Great work, thank you.
do you have this code base in a git you are using for demo purpose ??
How does this weigh up against dynamically loading content.
Does the code reside in a git repo to have a look at?
Yep, it's here: github.com/geelen/webpack-from-first-principles
Thanks. Please create more tutorials that on the topics mentioned at the end. Would be very useful.
Thanks for the video.
Great video !!
great video, would like to see how to create css from sass.
This video was great, this is exactly the kind of content I'm desperately needing. Sub'ed! Please keep it up! :D :D :D
+1
When is the next video on webpack coming?
I know this is an example, and a basic one at that, but for most Webpack things you post in this video, simply bundling and uglifying your code can be achieved with gulp and uglify/concat as well. I think for most sites webpack is overkill. Especially since some use it for AngularJS and webapps of which you only open the main page and not really switch page that the server is rendering. As in: you pretty much need to load the same stuff anyways. And of course having a short loading time is nice, but for most webapps i've been making the loading time isn't really that important (like 1.2 vs 1.4 seconds with only the page you need vs all pages are in cache) apart from simply uglifying, combining and removing anything you won't be using anyways. People won't mind loading a bit if its some kind of user-portal (which Angular does well). Not to mention that Webpack really benefits from a nodejs server and doesn't really work well if you make them as static resources.
Anyways, the tutorial was nice and i'm going to follow to see if i can learn a thing or two...
Enjoy the loading times of Angular 2, a 1MB framework.. Haha
Ember or Aurelia is the way to go.
I never mentioned that i was using Angular2 which will obviously get smaller too
I built plenty of single page apps and have steadily migrated from grunt, to gulp to webpack. The tree-shaking is especially nice in Webpack because I save a tonne of space on NPM imported libraries, compared to just including the whole minified lib.
Great explanation.
Why did you stop making videos? Very good content
Greet video , keep 'em coming :D
OMG thank you , i feel really dummy watching this :)
Updates, I am going to subscribe.
Jesus, why do I need a plugin to load a URL? They should have been added to that to the core.
Great video
Subscribed
Putting all those images, styles and etc in one file is good for loading speed increasing if to compare it with non bundling version in first time loading. But in case of non bundling approach all those resources will be cashed and will not consume network next times. Also assume now that we have several pages which use same resources, then if you not bundle then overall speed of navigating through the pages will be faster then bundling version. Seems that bundling is controversial approach. It may give benefits in some cases and in other case will not. So after all does this additional complexity with bundling everything in one file even worth?
Great video mate.. HMR next, please.
how have I not heard of npm scripts until now?!?
It would be useful to show how to get your web site rendered via localhost:8080. I think people would like to follow along and we seem to be missing a step
Seems to me such tools like webpack even if they improve performance etc actually make web clumsy compromising one of its main principles (KISS).
Very helpful thanks
Pretty awesome !
yes everything! pls! Webpack is def the future...if not a variant of it...asynchronous bundling def is the way to go....which is a fancy way of saying pre-pro
cessing browser engine I suppose.
Nice this was great; more more more more :)
thanks!
hats off
Amazing!
Superbe , you should really add a codepen, or git files.
also, you can slow down and go a bit deeper, im a bit familiar with webpack, but if this was my first tutorial , I 'd be asking lot's of questions I guess
nice vid..npm next pls
At the beginning, I thought he said Front End Santa.
Great!
语速好快，我听的有点费力。虽然开启了自动生成字幕功能，概念的理解上跟不上.
Thank goodness there are some smart people left among all the carnage. Why are so many of them Australians !