Coding

THE WEBPACK CORE CONCEPTS | Webpack 2 Basics Tutorial

  • 00:00:01 welcome back to this series about
  • 00:00:03 webpack in the previous videos we
  • 00:00:05 learned what web neg is and how to set
  • 00:00:08 up the development server now I want to
  • 00:00:11 dive into the core concept behind WebEx
  • 00:00:13 super important to understand we have
  • 00:00:16 four core concepts when using webpack or
  • 00:00:20 on which web page builds up on you could
  • 00:00:23 say web site always needs an entry point
  • 00:00:26 where should it start looking for
  • 00:00:28 dependencies and that can be multiple
  • 00:00:31 entry points as you will learn but it
  • 00:00:33 needs to have some entry point some clue
  • 00:00:35 on where it should start its journey it
  • 00:00:38 also needs to have an output and we use
  • 00:00:41 both entry and output here in our very
  • 00:00:43 basic usage where should it store the
  • 00:00:45 bundle or if you have multiple entry
  • 00:00:48 points the bundles then it will create
  • 00:00:50 multiple bundles one for each entry
  • 00:00:52 point and then you have two other things
  • 00:00:55 we don't see here which you will see in
  • 00:00:57 this video here though we have modules
  • 00:01:00 with loaders which allow us to transform
  • 00:01:04 our code and we have plugins which do
  • 00:01:07 kind of the same but on a different
  • 00:01:10 different level and you will understand
  • 00:01:12 the difference in this video let's get
  • 00:01:15 started by creating a config file thus
  • 00:01:17 far we ran all our website commands
  • 00:01:20 directly in the command line and it was
  • 00:01:22 fine until now but for a more detailed
  • 00:01:24 configuration we need a config file we
  • 00:01:27 added in the root folder the web pack
  • 00:01:30 config dot J's file and you can name it
  • 00:01:33 anything you like you will then have to
  • 00:01:35 specify the name of your config file in
  • 00:01:38 the command line though or if you use
  • 00:01:39 exactly this file name and website will
  • 00:01:42 pick it up automatically so if you added
  • 00:01:45 this file needs to have a certain
  • 00:01:47 structure it needs to export a
  • 00:01:50 JavaScript object which holds the web
  • 00:01:52 pack configuration and you use the node
  • 00:01:55 J as export syntax for this so you
  • 00:01:58 define a module and then use the exports
  • 00:02:00 keyword which you assign a JavaScript
  • 00:02:03 object the configuration object as a
  • 00:02:05 value
  • 00:02:06 now this JavaScript object has some
  • 00:02:09 basic things it needs to contain first
  • 00:02:12 of all we need to have
  • 00:02:14 entry where should we start the journey
  • 00:02:17 and as I said the entry you can have
  • 00:02:19 multiple formats it could be an array of
  • 00:02:22 multiple entry points it can be a
  • 00:02:24 JavaScript object where you map aliases
  • 00:02:27 to different entry points or here to
  • 00:02:29 start simple you simply reference one
  • 00:02:32 single file as a string though so here
  • 00:02:35 you could say dot slash source slash
  • 00:02:37 JavaScript slash app such as is my entry
  • 00:02:41 point here the same path as we use here
  • 00:02:44 in the package.json file and of course
  • 00:02:46 this path specified here in the config
  • 00:02:48 file has to be seen relative from the
  • 00:02:51 config file from the root of your
  • 00:02:52 project so now we tell web pack where to
  • 00:02:56 start
  • 00:02:56 we now need to tell it where to finish
  • 00:02:58 what you produce so in X as the output
  • 00:03:01 here output is a JavaScript object where
  • 00:03:05 we configure what the output should look
  • 00:03:07 like
  • 00:03:07 here again we do have different levels
  • 00:03:10 of detail the most basic form of
  • 00:03:13 defining the output is to tell webmix
  • 00:03:15 where to store it and then what to name
  • 00:03:17 it so we can add the path property here
  • 00:03:21 and these property names here of course
  • 00:03:23 are all kind of reserved these are names
  • 00:03:25 webpack will recognize and to make super
  • 00:03:28 clear that website it identifies us
  • 00:03:31 correctly we can use a node.js feature
  • 00:03:34 we can import the path package with
  • 00:03:38 required path this is available since
  • 00:03:41 you install node chairs on your machine
  • 00:03:43 and the path package a core node.js
  • 00:03:46 package simply gives you some utility
  • 00:03:48 functions which help you resolve the
  • 00:03:50 correct path so here you can now call
  • 00:03:53 the resolve method on this path package
  • 00:03:56 and as a first parameter you can pass
  • 00:04:00 underscore underscore dur name that is a
  • 00:04:03 reserved variable name you didn't define
  • 00:04:05 it anywhere right but it is available it
  • 00:04:08 is made available to you which simply
  • 00:04:11 indicates hey the current directory and
  • 00:04:13 then the second argument is the
  • 00:04:16 subdirectory you want to go to like gist
  • 00:04:18 a folder which should get created we
  • 00:04:20 don't have it yet and now why do we use
  • 00:04:23 this path results method because the
  • 00:04:27 output power
  • 00:04:28 needs to be an absolute pause so we
  • 00:04:32 can't define it like in the entry
  • 00:04:34 property whether you have a relative pop
  • 00:04:36 seen from our weapon context file on
  • 00:04:39 here we really need to have a an
  • 00:04:41 absolute path because webpack needs to
  • 00:04:43 write something there it needs to create
  • 00:04:45 a file for us there and the path result
  • 00:04:48 method resolve such an absolute top gift
  • 00:04:51 as an absolute path with the given
  • 00:04:53 inputs so that is where to store it now
  • 00:04:56 we also need to define the file name so
  • 00:04:58 how it should web nickname this file it
  • 00:05:01 creates and oftentimes you'll see
  • 00:05:03 bundled chess here though you're not
  • 00:05:05 limited to the names you can use any
  • 00:05:07 name you like of course but bandolce is
  • 00:05:10 clearly indicates that your code got
  • 00:05:12 bundled which is why it is a popular
  • 00:05:14 name so these are the two basic features
  • 00:05:17 we already used now before going into
  • 00:05:20 loaders and modules and plugins let me
  • 00:05:24 adjust our scripts I will remove entry
  • 00:05:27 and output file name here on the web
  • 00:05:29 pack – server and do the same for the
  • 00:05:31 website command I will leave the – P
  • 00:05:33 here though so now let's test both let's
  • 00:05:36 run npm run build prod first and see if
  • 00:05:41 that's the works looks good it's still
  • 00:05:42 created – this bundle chase file now I'm
  • 00:05:46 going to delete this file and I'll run
  • 00:05:48 NPM run build our development server
  • 00:05:51 also seems to work if we now revisit our
  • 00:05:55 webpage and reload it well somehow we
  • 00:05:59 now get an error here that is something
  • 00:06:02 we'll have to look at you but our main
  • 00:06:05 script the production script is working
  • 00:06:06 so it seems to have picked up where to
  • 00:06:09 get the files and the web pick dev
  • 00:06:12 server kind of seems to have picked it
  • 00:06:14 up but but not entirely there is
  • 00:06:17 something wrong with it why does our
  • 00:06:19 development server not like this setup
  • 00:06:21 well before where you pass the full
  • 00:06:24 filename with output filename remember
  • 00:06:28 that there if I temporarily revert this
  • 00:06:31 we specify the full path well now in our
  • 00:06:36 config file we split this up into a
  • 00:06:39 separate path and file name declaration
  • 00:06:41 so now
  • 00:06:42 out the webpack development server will
  • 00:06:44 only look for the file name and some who
  • 00:06:46 ignore the past year so to tell the web
  • 00:06:50 pack development server where this lives
  • 00:06:52 we have to add another property to our
  • 00:06:55 output here the public path which
  • 00:06:58 basically specifies well where are the
  • 00:07:01 assets to be found at and by default
  • 00:07:04 this is just slash but this is not
  • 00:07:06 correct because we know it will be in
  • 00:07:08 the dist folder and it doesn't pick this
  • 00:07:10 up automatically so we simply add this
  • 00:07:12 here slash dist
  • 00:07:14 and if we now restart the web pack dev
  • 00:07:16 server and reload our project you see
  • 00:07:19 the error message is gone and if I click
  • 00:07:21 the button it works again so now we fix
  • 00:07:23 this queue now the output is finished
  • 00:07:25 and both our normal web pack command as
  • 00:07:28 well as you set web server like it
  • 00:07:31 that's entry and output and again you
  • 00:07:34 can go into more detail here we will see
  • 00:07:37 more configurations throughout this
  • 00:07:39 series but let's first dive into the
  • 00:07:42 next core feature modules and loaders
  • 00:07:45 that is one feature area what is that
  • 00:07:48 modules and loaders allow us to
  • 00:07:51 transform our files and a good example
  • 00:07:54 with the our CSS files which we have
  • 00:07:56 used right now we still import them the
  • 00:08:00 conventional way here in our index.html
  • 00:08:02 file now you could say it would be nice
  • 00:08:04 if you could for one import the CSS file
  • 00:08:08 into the JavaScript file which sounds
  • 00:08:11 really weird but keep in mind it's only
  • 00:08:13 about informing web tech that we want to
  • 00:08:16 import this file we're not really mixing
  • 00:08:18 it with JavaScript we only want to make
  • 00:08:20 sure that it also gets loaded by web
  • 00:08:22 pack so that would be one thing and the
  • 00:08:25 second interesting thing would be to
  • 00:08:27 then while when website has this
  • 00:08:29 information that it should load these
  • 00:08:31 files well it can't add CSS to our
  • 00:08:34 JavaScript code so it would be nice if
  • 00:08:36 it could simply output it for us in the
  • 00:08:40 head section of our index.html file here
  • 00:08:43 and for that we need loaders we need
  • 00:08:46 modules which Judith transformation for
  • 00:08:48 us which enable us to load CSS in
  • 00:08:51 JavaScript and which then automatically
  • 00:08:53 added to the index.html
  • 00:08:55 now to get such loaders I will quit quit
  • 00:08:58 this process with ctrl C and then with
  • 00:09:01 npm install' we can install them now
  • 00:09:03 there are loads of modules and loaders
  • 00:09:06 you can use in web pack and you can
  • 00:09:10 simply google for the feature you're
  • 00:09:11 looking for typescript compilation yeah
  • 00:09:14 six compilation plus web pack and you
  • 00:09:16 should find the appropriate loader for
  • 00:09:19 DCSS use case here what we need is we
  • 00:09:22 need the CSS loader and the style loader
  • 00:09:27 these are also development dependencies
  • 00:09:29 so let's mark them as such and now it
  • 00:09:32 will get downloaded and added to our
  • 00:09:34 project you can see now in the package
  • 00:09:38 to JSON file here and now we can add
  • 00:09:40 them to our config and we have to tell
  • 00:09:42 weapon please take these loaders into
  • 00:09:45 account when analyzing our files now dis
  • 00:09:49 is super easy to do we have to add a
  • 00:09:52 module property here which is a
  • 00:09:55 JavaScript object and here you can
  • 00:09:57 simply configure how weapons should
  • 00:09:59 treat your modules now what is a module
  • 00:10:01 a module basically is every import you
  • 00:10:05 have like here the Dom loader file here
  • 00:10:07 these two variables these are modules
  • 00:10:10 because we export them and we import
  • 00:10:12 them here and our CSS files all the
  • 00:10:15 cookie modules that we want to import
  • 00:10:17 them so it would be nice if in our app
  • 00:10:19 such as file let's say right at the
  • 00:10:20 start we could write import go up one
  • 00:10:24 folder CSS and then main dot CSS that
  • 00:10:27 would be awesome
  • 00:10:28 and thereafter we also want to import
  • 00:10:31 the input element CSS file and of course
  • 00:10:34 you could even add more loaders which
  • 00:10:35 allow you to write fast code and nest
  • 00:10:38 your CSS code in each other and much
  • 00:10:40 more but it would be nice if you could
  • 00:10:42 use this basic syntax to begin with and
  • 00:10:44 with that added now these two are all
  • 00:10:47 the modules so that is what we configure
  • 00:10:49 here and now first of all we want to set
  • 00:10:52 up the rules for these modules so how
  • 00:10:55 should they be treated rules is in array
  • 00:10:58 of rules you guessed it and each rule
  • 00:11:00 complete the JavaScript object
  • 00:11:02 now each rule has a certain structure
  • 00:11:05 there are some properties you can set up
  • 00:11:07 but some
  • 00:11:08 you will need to set up for example to
  • 00:11:10 test property which means how does
  • 00:11:13 webpack know if this rules with this
  • 00:11:16 rule here the specific rule applies it
  • 00:11:19 tests the file extension because you
  • 00:11:22 probably have the same rules for the
  • 00:11:24 same files so for example if we and this
  • 00:11:28 is a regular expression here if we have
  • 00:11:31 a JavaScript file and your regular
  • 00:11:33 expression for this is backslash dot J
  • 00:11:36 as dollar to indicate it's any file name
  • 00:11:39 but it should end with JavaScript if we
  • 00:11:43 have a JavaScript file then we want to
  • 00:11:46 apply a certain loader that's the next
  • 00:11:49 property we're here
  • 00:11:50 we tested something now we add loader
  • 00:11:53 now the loader for the JavaScript file
  • 00:11:56 here is no loader because we don't
  • 00:11:59 transform our JavaScript code as of now
  • 00:12:01 so we probably don't need a rule for
  • 00:12:03 JavaScript but one for CSS file so let's
  • 00:12:06 change the extension to CSS and here I
  • 00:12:09 actually want to apply more than one
  • 00:12:11 loader now loader would simply take the
  • 00:12:14 loader as a name like CSS loader but
  • 00:12:17 that would only enable us to add the CSS
  • 00:12:20 code to to import it in JavaScript now
  • 00:12:23 if we run it like this
  • 00:12:25 let's run our build script the WebP egg
  • 00:12:28 dev server you see that this works but
  • 00:12:31 if I reload it here you see that this
  • 00:12:35 works but if I now go to the index.html
  • 00:12:38 file and comment out these two
  • 00:12:39 conventional imports here and I now
  • 00:12:42 rerun the server and load my file again
  • 00:12:45 you see all the Styles are gone because
  • 00:12:48 we didn't get an error so somehow it was
  • 00:12:51 able to handle our import statements
  • 00:12:54 here but it also didn't add these styles
  • 00:12:57 and of course it's cons because it can't
  • 00:12:59 add them to the JavaScript file so we
  • 00:13:01 need an average the Styles weapon is
  • 00:13:05 aware of an atom to the index.html file
  • 00:13:07 this is why one loader alone won't do
  • 00:13:10 here instead won't use loader like this
  • 00:13:13 we will use the use property which
  • 00:13:16 allows us to simply add multiple loaders
  • 00:13:18 here we add an array therefore
  • 00:13:21 and now we specify all the loaders you
  • 00:13:24 want to use and additionally you can
  • 00:13:26 also specify options here but that is
  • 00:13:29 something more advanced let's pick two
  • 00:13:30 loaders no important is the order here
  • 00:13:33 you could think that you start with the
  • 00:13:36 loader you want to apply first CSS
  • 00:13:39 loader and then the other one style
  • 00:13:42 loader which is responsible for taking
  • 00:13:44 the CSS code and adding it to the Dom a
  • 00:13:46 to your head section to be precise if we
  • 00:13:49 run those now you see we get an error
  • 00:13:52 the reason for this is that it's not
  • 00:13:55 able to handle these CSS imports it's
  • 00:13:58 the same error you would get if you
  • 00:14:00 comment out all that module part and run
  • 00:14:03 it right now but it's not able to handle
  • 00:14:05 up these imports in the apt of chance
  • 00:14:08 file instead what we should do here is
  • 00:14:11 we should reverse the order here
  • 00:14:15 so first lo – style outer den CSS
  • 00:14:18 because that super important actually
  • 00:14:21 web pack will execute your loaders in
  • 00:14:24 reverse order so the last element in
  • 00:14:27 this array gets loaded or gets gets
  • 00:14:30 applied you could say first so it will
  • 00:14:32 first use the CSS loader which is the
  • 00:14:35 loader we need to make it understand
  • 00:14:38 these imports and then it will add this
  • 00:14:40 style loader so now with this setup if I
  • 00:14:43 now run this command you see now it's
  • 00:14:46 working fine and if we go back to our
  • 00:14:48 running web page you see now I can
  • 00:14:51 reload it and I do see a working set up
  • 00:14:54 again with the code working or DB
  • 00:14:56 styling working the way it should work
  • 00:14:58 this is how you add loaders and how you
  • 00:15:01 configure how epics should treat your
  • 00:15:03 modules one of the cool features and
  • 00:15:05 super important and one of the main
  • 00:15:07 reasons why why Pegg is so popular
  • 00:15:09 because there are loaders for all kinds
  • 00:15:11 of things compiling typescript es6 code
  • 00:15:15 says as CSS much much more simply google
  • 00:15:20 around a bit and you will find a lot of
  • 00:15:21 use cases now let's dive into the last
  • 00:15:26 chord feature plugin
  • 00:15:28 what are plugins plugins are almost the
  • 00:15:32 same as loaders you could say and then
  • 00:15:34 again they are really there
  • 00:15:35 red loaders are applied on a per file
  • 00:15:38 basis so here we check for CSS files and
  • 00:15:41 then on every CSS file we use we apply
  • 00:15:44 these loaders to transform the code or
  • 00:15:46 load it correctly
  • 00:15:47 a plugin is then applied on your bundle
  • 00:15:51 before it is output you could say so if
  • 00:15:54 you have some transformation you want to
  • 00:15:56 apply to your whole code a plug-in is
  • 00:15:59 what you're looking for and a typical
  • 00:16:02 plug-in you would use is the
  • 00:16:04 minification plugin now of course we
  • 00:16:06 already can mini 5 by adding – p here
  • 00:16:10 and that uses this plugin indeed behind
  • 00:16:12 the scenes but if you want to really
  • 00:16:15 configure this specific plugin in all
  • 00:16:17 detail possible or add another plugin
  • 00:16:21 you will need to add the plug-in array
  • 00:16:25 here because you can add multiple
  • 00:16:27 plugins obviously now which plugin can
  • 00:16:29 be used here I will deal with that
  • 00:16:31 minification plug-in so I will simply
  • 00:16:33 need to import web tag for this so what
  • 00:16:36 do you require syntax here from web pack
  • 00:16:39 and any plugins array here I can now
  • 00:16:43 simply add new new keyword is important
  • 00:16:46 we need to instantiate it web pack
  • 00:16:49 whoops not like a method list though
  • 00:16:51 optimize so call optimize here and then
  • 00:16:55 the ugly 5ks
  • 00:16:56 plugin here you can pass options in a
  • 00:16:59 JavaScript object and this is why this
  • 00:17:00 might be preferable to executing it with
  • 00:17:03 – P you can now dive deeper into this
  • 00:17:06 and simply Google this plugin if you
  • 00:17:08 want you know all these options you have
  • 00:17:10 for example we could disable warnings we
  • 00:17:13 could turn mangling on or off which is a
  • 00:17:15 more aggressive form of manipulation and
  • 00:17:17 so on here I won't pass any but of
  • 00:17:21 course you could do that if I now
  • 00:17:23 restart my web site development server
  • 00:17:26 we should see a difference though if we
  • 00:17:29 reload the page it still does work but
  • 00:17:32 now if we inspect the source code you
  • 00:17:34 see it's minified here q and it wasn't
  • 00:17:37 before when we use the development
  • 00:17:38 server you can also see it on the
  • 00:17:40 network if you reload this you see that
  • 00:17:43 the bundles now shrank before it was
  • 00:17:46 around 300 kilobytes now
  • 00:17:49 smaller because we minified it so this
  • 00:17:52 is how we can add plugins the fourth and
  • 00:17:55 loss of the cool features of webpage so
  • 00:17:59 that is our finished configuration file
  • 00:18:01 now and that were the four core concepts
  • 00:18:05 of web pack the entry point where to
  • 00:18:08 start the output where to end what you
  • 00:18:12 create and in between during this
  • 00:18:14 journey we also have modules and what
  • 00:18:18 you do with them and module rules so
  • 00:18:20 what should you do with each individual
  • 00:18:23 file you load and then we have plugins
  • 00:18:26 right before we create the bundle
  • 00:18:28 what should you do with the prepared
  • 00:18:30 code with the overall code should you
  • 00:18:33 minify it should you do something else
  • 00:18:35 with it for example there are plugins
  • 00:18:37 which allow you to outsource your CSS
  • 00:18:40 code into separate style sheets things
  • 00:18:42 like these these are the core concepts
  • 00:18:45 that is how web pack works and in the
  • 00:18:48 next which is off this series we're
  • 00:18:50 going to have a closer look at some
  • 00:18:52 default use cases what you do with web
  • 00:18:55 pack using different loaders some common
  • 00:18:57 setups and things like these all right
  • 00:19:00 into the comment section what you would
  • 00:19:02 like to see a con promise that I will
  • 00:19:04 cover it all but definitely interesting
  • 00:19:06 to read that and I'll do my best to show
  • 00:19:09 some of the things you request there so
  • 00:19:12 see you in the other videos bye