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

You may also like