Coding

USING THE WEBPACK DEV SERVER | Webpack 2 Basics Tutorial

  • 00:00:02 welcome back to another video in this
  • 00:00:04 wet pack too serious in the last video
  • 00:00:08 of this series we learned what a web
  • 00:00:10 pack is and why you might use it now
  • 00:00:12 that's going to be a short video here
  • 00:00:14 before we dive into the cool concept of
  • 00:00:17 web pack and create our first
  • 00:00:19 configuration file I want to explain
  • 00:00:21 what you wetback development server is
  • 00:00:23 and why you might want to use it now
  • 00:00:26 right now in the example app we're using
  • 00:00:28 the file protocol as you can see here
  • 00:00:30 and the file protocol here simply has a
  • 00:00:35 couple of disadvantages compared with
  • 00:00:36 the HTTP protocol in the end it only
  • 00:00:38 loads our file locally on our machine so
  • 00:00:42 it doesn't send a HTTP request and
  • 00:00:45 whilst this works fine here a lot of
  • 00:00:47 other features won't be available or
  • 00:00:49 won't work in the same way as they work
  • 00:00:51 on a real server we all the can simulate
  • 00:00:54 that the assets were using like a
  • 00:00:56 JavaScript files are really downloaded
  • 00:00:58 from a server because they are not they
  • 00:01:00 are simply accessed on our file system
  • 00:01:02 which of course is super fast therefore
  • 00:01:05 in the network tab if you reload the
  • 00:01:06 page you see zero bytes here for all
  • 00:01:09 these packages because they're not
  • 00:01:11 reloaded via HTTP besides the fact that
  • 00:01:14 they are of course really small so it's
  • 00:01:17 not a great thing to test your app in
  • 00:01:20 this mode instead you should use a real
  • 00:01:22 server of course you shouldn't rent some
  • 00:01:25 server on some hosting provider and then
  • 00:01:28 try to test there that would be probably
  • 00:01:31 expensive and most importantly very
  • 00:01:33 cumbersome instead you probably want a
  • 00:01:36 little server running on your local
  • 00:01:38 machine and it would be great if the
  • 00:01:40 server would add some extra features for
  • 00:01:42 example automatically reloading your
  • 00:01:44 application whenever your code changes
  • 00:01:48 webpack offers the server which does
  • 00:01:50 just that the web tag dev server let's
  • 00:01:54 go go for it to learn more about it web
  • 00:01:55 pack dev server here we can choose the
  • 00:01:58 github repository of the web pack dev
  • 00:02:00 server and you can learn more about it
  • 00:02:02 and find links to the documentation and
  • 00:02:04 so on so that is you epic dev server
  • 00:02:07 room what it does is it spins up a
  • 00:02:09 little node.js server hosting your app
  • 00:02:11 with some extra features let's use it
  • 00:02:14 in our project here I will install a
  • 00:02:17 tree using NPM again it will be a
  • 00:02:19 development only dependency therefore I
  • 00:02:21 will add – – save – to indicate this and
  • 00:02:24 then the package name is webpack deb
  • 00:02:27 server which will download the latest
  • 00:02:29 version of it it will also create an
  • 00:02:32 entry in our package digest and fall
  • 00:02:34 here as you can see so now the web pack
  • 00:02:37 – to reward download it and what we can
  • 00:02:40 now do is here on the build script which
  • 00:02:42 is kind of our development build script
  • 00:02:44 we can replace the web pack call here
  • 00:02:47 with website dev server
  • 00:02:49 it's basically by the same developers
  • 00:02:52 and it will work like web pack it simply
  • 00:02:54 wraps itself around web- offers all the
  • 00:02:57 functionalities all the features of web
  • 00:02:59 next Plus that extra feature of
  • 00:03:02 providing as a development server so now
  • 00:03:05 here if i run npm run build now what
  • 00:03:08 will happen is it will still compile our
  • 00:03:10 code but here was an important message
  • 00:03:12 web pack output is roof from slash
  • 00:03:15 project running at localhost 8080 so dad
  • 00:03:19 at the address on our local machine
  • 00:03:20 where it spun up this development server
  • 00:03:23 as a side note the bundle of which it
  • 00:03:26 creates is no longer stored the dist
  • 00:03:29 folder here so if we deleted here it
  • 00:03:31 will still work instead of the stored in
  • 00:03:33 memory for the server if you run the
  • 00:03:35 other command for prod it will of course
  • 00:03:37 still output that but there is no need
  • 00:03:39 to output the files physically on your
  • 00:03:41 file system if you only want to test it
  • 00:03:43 so let's look at this page let's go to
  • 00:03:48 localhost 8080 now which is the address
  • 00:03:51 we saw in the console and if we have a
  • 00:03:54 look here we see it seems to be broken
  • 00:03:58 especially if we have a look at the
  • 00:04:00 console we see that now here it somehow
  • 00:04:04 doesn't find our bundle and if we go
  • 00:04:06 back to the project and try restarting
  • 00:04:08 the server NPM result we now get an
  • 00:04:11 error now you could say yeah of course
  • 00:04:12 because you did a liter the disk folder
  • 00:04:14 but that's not the main reason it's
  • 00:04:17 really is served from memory but before
  • 00:04:19 we didn't get an error because we had
  • 00:04:21 the oldest folder around – it loaded
  • 00:04:23 this now that it's gone we see that
  • 00:04:26 something doesn't seem to work about the
  • 00:04:28 web
  • 00:04:28 dev server command and the reason for
  • 00:04:31 this is that you have to tweak the
  • 00:04:34 command line options here unlike your
  • 00:04:37 normal web peg command you can just
  • 00:04:39 specify entry and output like this here
  • 00:04:41 instead you have to be explicit about
  • 00:04:44 which pop refers to what so you add – –
  • 00:04:47 entry where before it is we're in front
  • 00:04:50 of this source JavaScript app touches
  • 00:04:53 pop here and important prefixes pop with
  • 00:04:57 dot slash to indicate that it is to be
  • 00:04:59 seen relative from the package.json file
  • 00:05:03 and from the index.html file that you
  • 00:05:06 write so where we run this command from
  • 00:05:09 the root folder basically and the same
  • 00:05:12 for this here you should specify an
  • 00:05:14 output and now not just output the
  • 00:05:16 output file name and that also dot slash
  • 00:05:19 this to indicate where this should get
  • 00:05:21 stored and now if we rerun this command
  • 00:05:25 after canceling this again with ctrl C
  • 00:05:27 if we rerun this now we see it works we
  • 00:05:30 still don't have a dist folder but if we
  • 00:05:33 reload the project here it works
  • 00:05:35 correctly because now it has the right
  • 00:05:38 inputs and now it is able to load our
  • 00:05:41 files and create a bundle in memory and
  • 00:05:43 then serve it and now you can see that
  • 00:05:45 if you visit the network tab here now
  • 00:05:49 you can see that if you reload this you
  • 00:05:51 really have some real file sizes here
  • 00:05:54 and now you really are using your code
  • 00:05:57 here now you really are using HTTP here
  • 00:06:01 and you're accessing the files via HTTP
  • 00:06:04 requests now if you wonder why the
  • 00:06:07 bundle is so big well that simply is
  • 00:06:10 because it does not many fight not
  • 00:06:11 optimize at all and it contains a lot of
  • 00:06:13 code the web dev server simply uses and
  • 00:06:17 that only is available during
  • 00:06:19 development of course this will
  • 00:06:20 disappear once you prepare this app for
  • 00:06:22 production so that is now the web pack
  • 00:06:26 depth server a better way of testing
  • 00:06:29 your projects of running them in on your
  • 00:06:32 local machine and how you should really
  • 00:06:34 work with fronted apps with that out of
  • 00:06:36 the way let's dive into the config file
  • 00:06:39 which we can create for more
  • 00:06:41 about how we can find human web tag to
  • 00:06:44 our needs or the usage of web tech to
  • 00:06:46 our needs and dive into some a little
  • 00:06:48 bit more advanced features in the next
  • 00:06:51 video