WHAT IS WEBPACK, HOW DOES IT WORK? | Webpack 2 Basics Tutorial

while I can see this video this video will be about webpack 2 and the next videos in this series will also be about that and dive deeper into the individual features of webpack now what is webpack if you watched any of my other videos on this channel or you watched it some front-end development tutorials in general you probably already used webpack quite a lot because there you rarely just import script files or style files in your HTML file instead you use we're exposed probably using webpack which do a lot of work for you they bundle all your files together maybe they even transform them so that you can write your javascript code using es6 the next version of JavaScript which isn't supported by all browsers but then it's compiled by that we're explode by this tool which is being used to code which runs in the browser and web pack is such a tool one of the most important ones are probably the most important one you can use right now the most popular one Q web pack is a build tool you could say but it really does more than just build your code it manages your code it really allows you to create awesome web applications managing all your style and JavaScript files mainly but not limited to that so that is web pack now why would you want to use it let's have a look at a little example project I created you can find it in a branch in the github repository which is linked in the video description the first branch there this is a normal HTML file not that much content in it we have a header a button and a paragraph and then we're importing two with style files and two scripts we're importing these files from the source folder and then the respective subfolders that is a normal project and it's not using webpack or any other build tool at all therefore what we can simply do is we can reveal this file in the finder and simply double click on it to load it this will open it in a browser and that is really how you open your project but it works here and as you can see I can now click my here and show and hide the paragraph now one important thing to realize here is that we're using the file protocol not HTTP and that is something I will come back to in a later video in this series for now it's okay though and again that I'm importing all these scripts by hand and if we have a look at these script files here for example well what I do here is here in the after chess file I access my button add eventlistener then I call a method here a function which simply updates the paragraph so it shows it or hides it depending on this boolean variable we set up up there and then we also got this function which we attached to the event listener which toggles or changes this variable from true to false and the other way around and which then calls these update functions which update the Dom in the end which change the content of the button the text content and decide whether the paragraph is displayed or not and these buttons or this button and the paragraph I don't get access to them in this file I do doesn't need Dom loader J's file all I do here is I assign them to these variables and I get access to them with the document query selector method a normal JavaScript method and therefore DM word order is important in the index.html file I first import my Dom loader which accesses the elements in the DOM and stores them in variables and then the app dot J's file and if we switch that order well we can simply go back to the page reload it and you now already see that you can see the paragraph all the time and if we open the console we see we get an error that secret button is not defined and if I click the button nothing happens here our script is broken and that of course is the case because we switched the order here and therefore since we load the app dot J's phosphorus we try to access the secret button which is a variable which doesn't exist yet because that bit gets defined as the downloader which gets loaded second that already shows you my you might want to use that you like web pack which manages all your files for you now of course in this simple app there is no reason you could simply put all the code into one single file right you could put the apt uh chase file or decode in this file and decode in the downloader all into one JavaScript file and load that single file and that would be absolutely fine but of course there's only fine for a very simple application like this one you don't have to build a very big application to quickly have much more code and then you either have one file with tons of code inside of it which gets hard to maintain and manage or you have multiple files and you have to watch out that you import them in the correct order and that you don't forget an import here the same of course for your CSS files there you also may have a main file and then you have a file which specializes on some things on styling certain elements and maybe you want to use the cascading nature of CSS and even overwrite our styles and then you also have to keep in mind to use the right order so all in all this really works only in very small applications and quickly gets hard to maintain and manage and that is where webpack helps you additionally we're not minifying our code here now again for this very simple application that doesn't really matter but if you have more code you really want to optimize the code you want to minify it and of course you don't do that by hand you will use a tool which asset here again web pack offers such a functionality web pack helps you with that so let's quickly improve our app here by adding web page and using some of its very basic functionalities now to get web pack the easiest and most common way of doing so is to use NPM notes package manager now for that you will need node.js installed on your machine and whilst we won't write any node.js code here no worries we simply used it because NPM notes package mentor is the defective package manager for front-end web development and for managing all your dependencies and web pack will be such a dependency because that is a JavaScript library package we will use so make sure to download the latest version year and that of course may have a higher number at the point of time you're accessing this and install no chairs on your system once you did this you can go back to your project and there open up a terminal or command line window I simply use the one integrated into my IDE and make sure to navigate into that project folder and here what you can do is you can simply run NPM Amit you first need to initialize this project you need to initialize it and tell NPM that NPM should manage this folder after hitting Enter you're presented with a couple of questions you can basically hit enter on all of them here the default are fine for now of course feel free to fine-tune them now after you did this you should have a package sub JSON file here which basically keeps track of your project it allows NPM to manage it well let's do something with NPM let's use the NPM command again still in this project folder in the terminal here and then we can run install to install a new dependency and the dependency we want to use here is webpack of course make sure to add safe death - - save def to indicate that this is a development only dependency so we won't need it for production webpages simply it will be used during development now if we hit enter NPM will download this package for us and we'll create a new node modules folder in this project we will see it in a second in this folder it will store all the packages we added so here if we have a look you see a lot of packages were added because web pack has a lot of dependencies and if we search for it with web pack simply as one of these folders one of these projects here so that is how we add web packs now we can already use in our project the easiest way of using it is to go to the package of Jason song where you see that web tag was added as a dependency and add a little script we can name it build any name you like here in the scripts object make sure to wrap it with double quotation marks since we're writing jason code here now then all the between double quotation marks as a value for this property here you can find the script and the script simply is webpack this will target this web tech package we downloaded and you can't access it like this directly from the command line which is why I will create a little script for it accessing it from the command line would be more difficult you would have to type in to denote modules folder and so on so web tag and then the most basic form of using it and we will see how to write a configuration file and so on in the next videos the most basic for list to then define the entry point which could be our source JavaScript folder so here we could simply enter source JavaScript and then app dot J s like this there's a little web peg this is the father you should start your journey I will explain what this means in a second then you also define the output file let's say once you create a new folder test for distribution and there we want to create a bundle dot JS file this is our script defined with that script defined we have to adjust our app shares code because as I said website will start its journey here and what do I mean with that here we have to basically give website a clue about what this file F J's file depends on and that's how website will then work in each file you tell it K which dependencies that this file have and web pack works its way up starting at the file you specify as a starting point F chess in this case and then working its way through all the imports this file has and then the imports off the import and so on to finally know which files do you use which features of these files do you use and then it will merge all that code into one bundle well let's see it in action so first of all we need to import our Dom loader here so here we now simply add an import and we want to point to the Dom loader file now importing it like this won't do the trick though we also now have to specify what you want to import from the we have to tell whether what that is Q be able to import something from this file we have to go to the file first and export something err so simply place export in front of the variable the function whatever it is you want to make available outside of this file now as a side note you might recognize that this is es6 syntax and it is but you still will run your code as es5 and you can't use other es6 features it's only that import and export syntax which is detected by web pack and then used correctly so don't think that you can write es6 code now we would have to add a certain additional package to be able to do so and we will see this later in this series and other videos for now it's only that export and import syntax we can use so we export both variables so with wheen kali braces using this es6 import syntax we can now reference the secret paragraph and the secret button about variables we then use in this app tops J's file with that we can simply run npm run build our script we created here and hit enter and we should see that web hex successfully created a bundle for us you can see it in the disco der this bundle file which includes a lot of code webpack added for us but most importantly it should work so let's now add this to our index.html file I'll comment out DQ other imports and simply add a new one where I then point Q D dist folder and here D bunwich as file we just created and website let's simply reload our app here and this looks pretty good since we don't see an error and you see the button also still works so we got the same functionality as in the start of this app but we only have one import now and this gets managed by web pack and if we add more JavaScript files and import them in the app dot J's file web tag will automatically add into the bundle and manage it for us and as I mentioned data is super important and another great future web pack offers is you can also minify the code so before we conclude the video let's do that let's add another script which we maybe named bill : brought of course the name is up to you and then you can simply copy the command from the build process but you also add - P here or - P at the end after webpack basically this will run it in production mode which simply changes some things webpack does one of the most important things is that website will now automatically minify your code we can see this by running npm run build process we run this you see a new bundle was created if you access this this looks much more compressed smaller if we reload the application it still works but now we're using this smaller code as you can see if you whither to sources folder this bundle chairs here you also see that many flight code which of course is smaller and therefore it's downloaded faster something you will really only see if you're using the HTTP protocol which we aren't right now so in the next series in the next video of the series we'll have a look at how we can use the web pack development server to host our app on a little dummy development server to simulate that it is on a real server which you can only simulate if you use the HTTP protocol and not the file protocol which doesn't offer the same features and thereafter we'll dive deeper into web Pegg and its core features

Channel: Academind

Views: 501,325

Rating: 4.912425 out of 5

Keywords: webpack, webpack2, webpack 2, tutorial, what is webpack, how does webpack work

Id: GU-2T7k9NfI

Length: 14min 55sec (895 seconds)

Published: Mon Mar 20 2017