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!
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!
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.
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?
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.
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?
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.
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
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?
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.
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.
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
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.
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 video, I just wish people would stop speeding up their videos, when you talk at normal speed and your videos play at xx it makes it hard to follow the subject, either speed up both the video and audio together or better yet don't speed anything up.
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.
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!
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!
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.
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?
THE webpack introduction. Just great, thx!
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!
Amazing video! Perfect voice over and nice pace. Keep rolling out quality like this, and your subscribers will flock & the web will get better.
Sup Glen, which font are you using in both editor and console? Thanks!
Best concepts into practice + tutorial available so far! Look forward to ongoing videos.
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.
Loved the episode! Thorough, thoughtful, and easy to follow. Looking forward to more to come!
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?
Great video. I would be grateful if you continue with more videos on webpack. Thanks
Bundle splitting is one of the complicated thing. Could you do video on that?
I would love to see more on this series!
Very clear and simple explanation! Looking forward to future videos!
Thanks for the great and clear introduction!. Will be keeping an eye on the channel to see future additions!
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 intro to Webpack! CSS and image loading in particular.
Amazing video! Thank you for the clear intro to Webpack! Would love more Webpack videos!
How does this weigh up against dynamically loading content.
This is the second subscribe for me in terms of JavaScript. Thanks for supporting the community mate.
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
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?
Great video... would love to see tutorials on the topics mentioned at the end. Especially Hot module replacement and bundle splitting. 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.
do you have this code base in a git you are using for demo purpose ??
Great Video!! More webpack please
Great video with very clear explanations! Thanks
Great video.
A great video, so well explained. Any chance of a follow-up?
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 !
Great video. We need more. Thanks a lot.
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.
This is what you call a GREAT presentation. i can only say wow.
I'd Love to see more about this!
I am using requireJS for my dependency management. What are the benefits of Wepback compared to RequreJS? Question for those who used both.
Keep up the good work mate! Looking forward to future episodes.
Great video. Great tempo and style.
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.
Very well explained, immediately subscribed, looking forward to more.
Best Webpack video I've seen. Good job
I want more! really enjoyed the video :)
Gidyup! Absolutely great video. I've subscribed and encourage you guys to keep doing this amazing job.
Thank you so much! Really down to earth and relevant.
Hey Glen, kudos for your videos. Good looking and very informative!
Amazing primer on Webpack!!
But, 2 months and no videos, please upload more
Awesome explanation! When are we going to see new videos on webpack?
Great video... keep them coming!
Thank You for this video! Awesome!
Thanks for the good intro guys. Keep up the good work :)
Well done. Thanks for sharing.
Excellent video. Thank you
what's the editor at 1:18 and the terminal app at 1:01 ? Thanks!
looks like atom then hyper
webstorm and (likely) iterm
When is the next video on webpack coming?
This was a really good video. Thanks for breaking this down.
Great Video ! Can you make a video/playlist for React testing ?
Very informative video. Thank you.
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.
Great video. Even though I have used webpack before and I'm familiar with it I enjoyed your explanation.
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?
Why did you stop making videos? Very good content
Great video and explanations.
Great work, thank you.
Jesus, why do I need a plugin to load a URL? They should have been added to that to the core.
love the tricks you show
Thanks for the video.
This is excellent! Super informative.
dude, your videos are just awesome. Thanks for sharing! :)
Greet video , keep 'em coming :D
Updates, I am going to subscribe.
Great video mate.. HMR next, please.
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
great video, would like to see how to create css from sass.
Great explanation.
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 video
Subscribed
Great video !!
OMG thank you , i feel really dummy watching this :)
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
Very helpful thanks
how have I not heard of npm scripts until now?!?
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
thanks!
Nice this was great; more more more more :)
Seems to me such tools like webpack even if they improve performance etc actually make web clumsy compromising one of its main principles (KISS).
Pretty awesome !
Superbe , you should really add a codepen, or git files.
Nice video, I just wish people would stop speeding up their videos, when you talk at normal speed and your videos play at xx it makes it hard to follow the subject, either speed up both the video and audio together or better yet don't speed anything up.
hats off
nice vid..npm next pls
Amazing!
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.
At the beginning, I thought he said Front End Santa.
Great!
语速好快，我听的有点费力。虽然开启了自动生成字幕功能，概念的理解上跟不上.