- 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