What Is Webpack?

hey what's up this is Scott with level up tutorials and in this what is Wednesday I'm going to be covering webpack so I'm gonna be talking about what is webpack why might you use it why it's a little confusing sometimes understand what it is or how you'd use it or maybe even some of the syntax or some of the code involved so we're gonna be talking all about webpack and what it can do for you [Music] okay so in this what is Wednesday I'm gonna be talking about webpack what is web pack and this one is a good one for this type of video because honestly what is bundle your styles bundle your assets modules and dependency static assets all okay up front here yeah this makes sense we have a little bit of an image giving us a hint to sort of what this does it takes a bunch of files that are connected in some way we have sass files and JavaScript in images it runs them through this cube which you're assuming is webpack and spits them out as well just standard JavaScript CSS Bing and JPEG you know stuff the browser recognizes and so this might seem like kind of interesting right we're taking all this stuff for running it through something and we're getting this stuff out and to me that screams build process and you know when web pack came out and people were talking about it there was such a rush to call it like a module loader and all sorts of stuff but not a build process because it's it's different than a build process well in my 100% understanding of web bag it's a build process if you come from grunt or gulp it's essentially doing the same kind of things it's taking your files it's running them through some sort of conversion and it's spitting them out into something the browser can understand if you've used gulp or grunt you remember that you could add in something like a sass package to pipe into your gulp and it spits out CSS and web pack is very very similar to that it's going to do that in fact there isn't really an instance in which you would want to use gulp with webpack or grunt with webpack unless you had a gulp a build process already in place that you didn't want to leave so the reality of it is is it takes the place of something like that now I should mention when I'm talking about some of these features within this video I am NOT meaning to say in any sort of way that gulp or grunt can't do some of these things in fact this is just going to be about what webpack can do specifically so if you scroll down you'll see we get a little bit more information right you write your code well we have app dodges we have bar dot J s and we have a WebP a config file and we have an HTML page and well what happens here well we run this web pack config we we run web pack essentially and it's going to use our JavaScript files and it's going to be able to import and export and do all that great stuff to keep your JavaScript modular if you've worked in any sort of modern JavaScript environment for application development it's extremely common and definitely if you've worked in you know create react app like we do in the react 16 for every one course small plug their head over to low level up to Torrez comm you can become a pro or purchase this series sorry about that small plug had to do it but what this is here is we're splitting up our JavaScript into many different files and because of that we can import them and we can export them and we can organize our code in a way where well things are no longer global if you had a giant JavaScript file or several giant JavaScript files then you'll run into things like namespace collision where you have two variables that are named something and when you're working with modules you'll never have to worry about that because if I import poster from movie then this is what poster is right but if I defined poster in another file somewhere else it's not gonna have any effect on this file in particular because I'm importing it directly from here and things very explicit and if you're working in any sort of any sort of JavaScript web application write angular react view any of this stuff this modularity becomes so extremely important you don't want a bunch of global stuff sitting around your files because that's just going to lead to a complete disaster very quickly so what web pack does this allows you to use this sort of importing and modularity and modular system and that's not really just it because it allows you to plug in different things right so in addition to handling our JavaScript modules it also handles well conversion from es next to current version of JavaScript that works in the browser using Babel and so by using things like web pack with something like babel with something like sass with something like autoprefixer basically allows you to write this code in a way that makes everything nice and organized module all that good stuff and it builds your code into something that the browser can read again coming back to this thing if you think about a web pack is really just a build process and it's an advanced build process at that and there's a lot of advanced features there like things like dead code elimination right it can find code that you're not actually using or maybe it can bundle up smaller modules of JavaScript so you're not serving your entire application to every single user that just visits your homepage right and so web pack is is great for these super advanced features because well it has so much flexibility in configuration now the problem is is when we get into config files they can look like a total well I don't know in my opinion it's difficult to parse this in fact is the config file that comes with the create react app after you eject from create react app now that said this config file is definitely a bit more crazy than some others but as you can see here the syntax is by no means as concise and nice is something like gulp where you're just writing a function you can keep track of everything and in my opinion it's filled with a bunch of jargony terms like a loader and module and rules and and all sorts of stuff that well it doesn't lend itself to being super easy to pick up I mean for instance look at this config file that is output as the dev config file for create react app this thing is so intense that they have to have multiple line paragraphs of comments sort of explaining what each of these things does I mean look at this there's three lines here and so in my opinion the best way to work with something like web pack isn't to always write your own config files from scratch or but to look for config files that do what you want them to do and borrow them or if you have the ability to just work in a system that up that obfuscates the web pack config itself like something like next is or gatsby both are using webpack as their build process but you don't have to visit those files if you don't want to because they're already taken care of for you in fact one of the reasons why I like meteor so much is because you don't really ever have to touch a build process config file despite it not using webpack itself so so and that's not to say that web packs syntax is unreadable or anything like that if you take the time you can learn all of the ins and outs of web pack pretty pretty significantly that said yeah look at this yikes so if you want to learn Lepik I mean they're they're Doc's are great so if you head to web pages org you looked at their getting started they do a basic set up where yeah we create a basic JavaScript file we create a basic HTML file and then we learn about adding bundles and adding packages and stuff like that and you start to write your own web pack configuration see how this first web pack config dot J's file this right here is way way way way way infinitely nicer to read then the one that's going on here that said this is doing a lot more so what you have here is you have yep you're bringing in path which is a note package and we are exporting well the entry to our app which is at index J s and we're going to output bundle J s and we're not really doing anything else at that point well it's just going to work for us all we're doing in this javascript file is simply importing lo - I believe scroll up top here yeah all we're doing is really importing lo - into this file and that's it so what web pack is going to do is it's going to use that NPM package lo - and it's going to import it allow us to use this import/export syntax so at the end of the day is web pack worth it absolutely web pack is worth it it's the best build system around even if you don't want to call it a build tool or build system it does all of this - very excellently but it handles modern j/s applications in a way that you couldn't necessarily do before with all of the modern bells and whistles that said given the opportunity if I had to choose between not writing web pack config and writing a web pack config I would always choose not writing a web pack config so using something like next or deaths B or whatever and maybe you want to just borrow some web pack configs so well maybe you'll just want to head over to Google and start googling like react application web pack and fig and start copying and pasting instead of necessarily starting from scratch although it is a great thing to sort of learn this there is a lot here and most of it is worth your time for instance lazy loading and code splitting and tree shaking and hot module replacement and all that great stuff is something that is going to make your application better and your development experience better so like I said you will want to spend the time to learn web packing and get this going if you plan on writing your own script if you're happy with systems like next or Gatsby that will save you the headache of having to write this stuff yourself or you can always just head to google and grab some config that adds the stuff that you want to use maybe that sass or autoprefixer or whatever so at the end of the day web pack is something that simply just collects your JavaScript modules and when I say module I mean a file that's imported somewhere and exported somewhere else right is a contained file a containment module again these like syntactical things sort of get in the way sometimes you see it it's a module Bunder not a build system like okay I get it but what it's doing is its collecting your files it's converting them into something the browser can understand and it's spitting them out into actual files so I hope that made sense and I hope you have a better understanding about what the heck web pack is and maybe have it not be so confusing in the future because it's definitely one of those things that's easy to look at and just go okay if you just not know what to do next so this is the second iteration of what is Wednesday as someone mentioned before you tubers keeping schedules are difficult and I totally understand I fully intend on continuing this week after week after week so let me know what things you want to hear about I already got a ton of amazing suggestions from the first video and I'm hopefully going to keep plowing through these until we have covered everything there's possibly is to know about what the heck is this thing and how we can learn it in a more basic way because of all the stuff web dev stuff can be often filled with tons and tons of jargon okay so if you found that this to be excellent and you would like to see more level up tutorials the react 16 for everyone course was just released and covers get this a web pack less configuration because it's using create react app now that said you can eject from create wracked up and have access to these lovely web pack config files if you'd like but they're there nonetheless right so if you like this you head over to level up tutorials calm for it slash store it's the react 16 for everyone or you can become a level up pro and get a new premium tutorial series every new month for instance this one that just came out for October was react 16 for everyone November's premium tutorial series is going to be modern CSS layouts where I cover not only CSS grid and flexbox but all these modern CSS properties that work together to help you build excellent excellent modern layouts it's going to be an excellent course and I'm really super excited about it so head on over to level up to Torrez comm forward slash Pro and subscribe today that wouldn't make me SuperDuper happy and help fund and fuel videos like this one itself so thanks so much for watching and I'll see you in the next one bye

Channel: LevelUpTuts

Views: 41,356

Keywords: react, reactjs, react.js, js, javascript, ui, user interface, subscribe, react tutorial, beginners, jsx, html, progressive web app, pwa, tutorial, how to, web, web development, programming tutorials, nodejs vscode javascript, programming, static site generator, gatsby, gatsbyjs, web performance, first look, web developer, graphql, graphiql, website development, fast websites, jamstack, stack, ssr, server side rendering, web dev, facebook, webpack, javascript (programming language)

Id: nfmvexyoHXE

Length: 13min 58sec (838 seconds)

Published: Wed Nov 08 2017