Coding

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

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