Dive into Webpack

In this talk I give the folks at Insiten an introduction to webpack. Webpack is a JavaScript bundler that has a rich ecosystem and feature set via plugins. It is used by the top frontend JavaScript frameworks React, Angular, and Vue. If you are a frontend developer, there is a good chance that you are using Webpack. For that reason, it is to your advantage to learn how it works and how to use it.

Transcript

The following transcript was automatically generated by an algorithm.

00:00 : so we're going to talk about webpack and
00:03 : um
00:04 : and
00:06 : so i'll just divide the talk up into
00:11 : uh
00:12 : webpack
00:14 : i'll divide it up into why are we
00:16 : talking about webpack
00:19 : uh
00:20 : what is it what does it do for you
00:23 : and how uh i will have a pretty lengthy
00:28 : sort of hands-on section
00:30 : where
00:31 : you're welcome to follow along with what
00:34 : i'm doing either live or afterwards
00:37 : um
00:39 : and
00:40 : and i'll show you kind of step-by-step
00:43 : what you would be doing to set up
00:46 : webpack for yourself
00:49 : if you ever have an occasion to do that
00:52 : um
00:53 : [Music]
00:54 : okay
00:55 : so let's get into it so why why
00:59 : why should we
01:01 : learn about webpack why
01:04 : why do we think it's a good idea to
01:05 : learn about webpack
01:07 : um
01:08 : i think the first reason is it is very
01:11 : widely used
01:14 : you have probably heard of it
01:16 : um
01:16 : [Music]
01:18 : and it's very widely used
01:21 : um
01:22 : considering
01:24 : that uh all three of the most popular
01:29 : front-end frameworks
01:31 : use webpack internally
01:33 : uh
01:35 : they may not
01:36 : they may or may not advertise that fact
01:38 : but they all do use it
01:41 : and
01:42 : and because they are using webpack and
01:45 : because webpack is a very
01:48 : sort of highly featured
01:51 : tool
01:53 : and a highly configurable tool
01:55 : uh each of these
01:57 : front-end frameworks have had to come up
02:00 : with a way
02:01 : of allowing you to customize webpack
02:05 : in some fashion in the
02:07 : event that you do need to
02:11 : do that
02:12 : um
02:13 : so so that that leads us to the second
02:16 : reason why you might want to
02:18 : learn about webpack which is
02:21 : there might be occasions that calls
02:24 : for you
02:25 : customizing
02:26 : webpack
02:31 : i'll say customization
02:34 : um and um
02:37 : and the third reason i think you should
02:40 : know about webpack is uh
02:42 : the more you know
02:44 : uh
02:45 : i i hold the opinion that the more you
02:48 : know about the tools that you're using
02:51 : uh the the more powerful you become the
02:55 : more um
02:56 : able you are
02:58 : to control
03:00 : whatever it is that you're doing and
03:02 : because all of our tools or at least
03:05 : most of them
03:07 : um are open source
03:10 : really there's no really
03:13 : hard limit
03:14 : on
03:15 : what you're allowed to know and you
03:18 : might as well take advantage of it
03:21 : okay
03:22 : so that's the why
03:24 : of
03:25 : any questions or any comments
03:27 : about this section
03:30 : okay
03:32 : all right so um
03:34 : what what what what does webpack do for
03:37 : us um
03:38 : and where do we need it what what are we
03:42 : using it
03:43 : why are these
03:45 : major web frameworks using it
03:48 : um
03:48 : [Music]
03:51 : it's kind of it the the one
03:54 : sentence summary of it is uh it gives
03:58 : you
03:59 : a
04:00 : more
04:01 : features
04:03 : uh it gives the javascript language more
04:06 : features sort of
04:08 : a cheesy term would be it supercharges
04:13 : your your javascript
04:15 : uh it gives it more features um in what
04:19 : ways well uh the the actually the most
04:22 : important way
04:24 : or the the one
04:26 : single feature
04:28 : that was
04:30 : most lacking in javascript
04:33 : for a very long time
04:36 : that was modules
04:39 : javascript historically did not have a
04:42 : module system when
04:45 : it was first designed and
04:48 : released to the public
04:50 : and
04:52 : and because of that and and because the
04:54 : the sort of
04:56 : um
04:58 : developers
05:00 : really high desire for
05:03 : for a module system to exist
05:06 : um various developers have
05:09 : came up with and designed and
05:10 : implemented
05:12 : various module systems
05:14 : to go along with javascript
05:18 : you might have you might have heard
05:20 : about things like
05:23 : require.js
05:27 : uh browserify
05:29 : uh system.js
05:32 : uh
05:33 : these are all examples of various
05:35 : developers taking it upon themselves to
05:38 : come up with a module system
05:40 : that would enhance javascript uh at some
05:43 : point we
05:45 : finally the standards body
05:47 : i believe it's called w3c
05:50 : they have came up with a standard uh
05:54 : module system
05:56 : for javascript however that
05:59 : even though it became a standard the
06:02 : implementation uptick
06:04 : for that was actually quite slow
06:07 : and because of that and because
06:10 : developers cannot wait
06:12 : uh developers have to make systems that
06:16 : would can make modules work and that is
06:19 : one key thing that webpack does for you
06:22 : it adds
06:24 : the ability for you to say like
06:27 : import
06:29 : star as low dash from
06:32 : low dash so so that that's what i mean
06:35 : when i
06:36 : yes yeah that's what i mean when i say
06:39 : modules like
06:41 : travis you it used to be that you simply
06:44 : can't do that in javascript and
06:47 : now you can uh
06:49 : with webpack now there's an asterisk
06:52 : next to that claim
06:54 : uh
06:55 : actually
06:57 : more recently
06:58 : modules have been implemented
07:02 : natively into the browser as well as
07:05 : into node.js so
07:07 : if you're using the
07:10 : leading edge technology
07:12 : you can even use
07:14 : modules without using webpack
07:16 : if you're interested in that
07:18 : you would want to look into something
07:20 : called
07:22 : esm
07:24 : modules
07:28 : oh
07:28 : boy okay not not not the circuit board
07:33 : but the uh ecmascript modules so
07:36 : ecmascript modules is actually a feature
07:38 : that
07:39 : sort of is uh implemented
07:42 : natively
07:43 : in the chrome browser as well as all of
07:46 : the other leading browsers now
07:49 : as well as node.js so it is actually
07:52 : possible to use modules
07:54 : even if you don't use
07:56 : webpack but there's kind of like a
08:00 : more recent development
08:02 : um
08:04 : if even though that's the case um
08:06 : webpack is still very uh
08:09 : very widely used just because it's been
08:11 : entrenched for so many years
08:13 : and in addition to modules it also has a
08:16 : bunch of other features
08:18 : such as it can it can plug in plug-in
08:23 : system
08:24 : it has plug-in systems
08:28 : that allow you to plug in
08:31 : typescript
08:33 : um babel
08:36 : uh
08:36 : css pro css
08:40 : preprocessors
08:43 : such as sas
08:45 : less etc it has plugins that allows for
08:49 : a lot of different
08:51 : languages
08:52 : that that you might add to your project
08:54 : that are popular these days
08:58 : um okay
09:00 : um
09:00 : [Music]
09:03 : yeah i i think that summarizes the what
09:06 : it does for you
09:08 : and
09:09 : any any questions about this
09:15 : okay
09:17 : so
09:18 : now we're getting into the how
09:22 : so in the house section i'm gonna do a
09:24 : um
09:31 : hold on okay
09:33 : i'm gonna do a demo which will uh i'll
09:36 : split that up into sections the first
09:38 : section is going to be
09:40 : um the like how to how to set things up
09:44 : like you you're making a new project
09:47 : brand new project and you're going to
09:49 : use webpack
09:51 : um how do you set it up uh keep in mind
09:54 : this is not something you would do if
09:57 : you were using
09:59 : one of these three
10:01 : uh front-end frameworks because they
10:03 : have already done this for you
10:05 : uh what i'm gonna show you is
10:08 : would probably be
10:10 : um you don't want to use the setup
10:12 : that the or the elite is the default
10:15 : setup
10:16 : that
10:17 : the the the
10:18 : major frameworks have given you
10:21 : um
10:22 : um
10:23 : and this is like you want to do roll up
10:26 : your sleeves and do it yourself
10:28 : and and set up webpack yourself i'm
10:30 : gonna show you how you would do that
10:33 : um
10:34 : so we're gonna
10:35 : i'm gonna do the basic setup i'm gonna
10:38 : do the css if you're gonna add css into
10:41 : the
10:43 : mix um i'm gonna show you how to do a
10:47 : hot
10:48 : hot reload
10:50 : which is the common thing where you edit
10:52 : your code
10:54 : you save your code and then the server
10:57 : detects that you change your code in
10:59 : some way and it will refresh your
11:01 : browser
11:02 : to reflect the newest state of your code
11:08 : and yeah also your heart reload which is
11:10 : done with something called webpack dev
11:13 : server
11:14 : in case you have heard of this
11:17 : [Music]
11:18 : and then i'm going to add a typescript
11:21 : to the mix to show you how you would
11:24 : set up typescript with a with a bare
11:26 : bones webpack configuration
11:30 : and then i will also add react to the
11:33 : mix if you wanna i i set up the webpack
11:36 : stuff
11:37 : myself and i just decided
11:41 : today i want to add react to my
11:44 : bare bones project
11:46 : uh and and you can do that yourself with
11:49 : your own webpack setup
11:51 : um
11:53 : and
11:55 : the at the end i'll show you like
11:58 : so if you if you use uh
12:01 : if you use react you most likely have
12:04 : used something called create react app
12:08 : which is people call cra for short
12:12 : um i'm gonna show you so cra has this
12:15 : eject feature
12:18 : um which says
12:20 : hey i want i no longer want to use cra
12:24 : and i want to start rolling up my
12:26 : sleeves
12:28 : and configure webpack by myself
12:31 : and and if you if you were a cra user
12:35 : and then you just decided to eject
12:39 : then what you would end up doing
12:42 : is uh you're not no longer using cra
12:46 : after
12:47 : that action
12:48 : and then and then what they do is they
12:51 : spit out a webpack config file for you
12:54 : to modify on your own and then and then
12:57 : at that point you're you're responsible
12:59 : for uh dealing with webpack directly
13:03 : yourself and i'll show you uh
13:06 : how to do that
13:07 : and what does it look like
13:11 : after you do that
13:12 : so that's the plan let's get into it
13:16 : any questions before i start
13:20 : okay
13:21 : yeah
13:23 : oh i was just no i was just giving you
13:25 : some feedback yeah okay
13:27 : cool
13:28 : let's do this
13:31 : all right
13:33 : uh so
13:34 : what i have done so far is
13:38 : nothing basically nothing
13:40 : okay i made this i made this file that
13:43 : has what i wrote
13:45 : uh
13:46 : but other than that i have an empty
13:48 : directory so i just created an empty
13:51 : directory i cd into the empty directory
13:55 : so from your perspective i haven't done
13:58 : anything at all
13:59 : other than that
14:01 : so now i'm going to set up a new
14:04 : front-end project
14:06 : using npm
14:07 : and i'm going to use npm in it
14:11 : with a dash
14:13 : y which just means
14:15 : i want to say yes to all the annoying
14:17 : questions they're going to ask me
14:20 : and then what it does is generates a
14:24 : package.json file that looks like this
14:27 : very bare bones
14:28 : so it's got nothing
14:31 : and the first thing i'm gonna do
14:33 : is uh
14:35 : i'm gonna install
14:37 : the webpack with the two npm packages
14:42 : that all webpack users will use
14:45 : so npm install and those are webpack
14:50 : and webpack
14:52 : dash cli
14:54 : and i'm gonna say
14:56 : save dev and save it as a def dependency
15:01 : into my package json file
15:09 : okay
15:10 : so it did that uh
15:12 : and if i come back into my package.json
15:16 : file you see
15:17 : they are in the file there
15:21 : uh now
15:23 : i'm going to make
15:25 : i'm also going to add a couple of uh
15:29 : libraries that i'm actually going to use
15:31 : in my i'm going to make a very small
15:34 : bare bones
15:36 : front end application
15:38 : uh just for sure
15:41 : it's not gonna do
15:43 : much interesting but i am going to use
15:46 : two npm packages
15:48 : just to show that i'm using packages
15:51 : so the packages i'm gonna use are
15:54 : lowdash
15:55 : and hyperscript
15:58 : hyperscript
16:00 : i'll show you what it does in a moment
16:02 : but it just like if if you you want to
16:05 : use the
16:06 : raw dom api the raw native dom api
16:10 : to construct dom elements and put them
16:13 : together
16:14 : hyperscript is a little tool that
16:20 : allows you to write shorter syntax to do
16:23 : that in a cursor way
16:29 : okay so we installed those guys and now
16:31 : i'm gonna create a um
16:34 : i'm gonna create a source folder
16:39 : src
16:40 : uh this this
16:42 : source folder um it's
16:45 : it's sort of webpack's recommended
16:48 : directory name
16:50 : it's configurable you can change it if
16:53 : you want to
16:54 : and i'm gonna
16:56 : add a index.js
16:59 : okay
17:00 : so
17:03 : now what i'm going to do in this
17:05 : index.js file um
17:08 : i'm going to
17:09 : import low dash
17:14 : i'll say import star as underscore from
17:18 : low dash
17:19 : i also import hyperscript
17:27 : i think i do it like this if if i'm
17:29 : wrong about this i'll have to fix it
17:31 : later
17:33 : actually i have a cheat sheet
17:36 : oh the cheat sheet says i should do it
17:38 : like this so yeah i'm gonna say import
17:41 : the what's coming
17:43 : in from hyperscript i'm gonna alias that
17:46 : to the letter h
17:48 : um
17:49 : now i'll show you quickly the
17:52 : hyperscript
17:56 : readme just you get a taste
17:59 : of what that might look like
18:03 : yeah so so this is like it's almost like
18:05 : you're writing html in javascript which
18:10 : uh
18:12 : which you're you're also doing in react
18:15 : so
18:16 : but uh yeah it's something like this
18:18 : but for now we're not going into react
18:21 : yet which is why i'm doing this
18:24 : okay
18:25 : so now i have both low dash and
18:29 : hyperscript imported
18:32 : i'm gonna write the app and for the app
18:35 : all i'm going to do
18:37 : is uh have a list of people's names
18:42 : [Music]
18:48 : [Music]
18:49 : alright some
18:50 : [Music]
18:52 : i've been watching some the chess
18:55 : world championship
18:57 : recently so i'll write down the names of
19:00 : some people
19:02 : that are associated with that okay so i
19:04 : have a list of
19:06 : names of people
19:09 : and then i'm going to um
19:11 : [Music]
19:13 : i'm going to try to use something from
19:16 : low dash
19:18 : maybe like
19:22 : i'll use map to loop over each person
19:27 : and then for each person i'll generate
19:31 : a li element and with with the
19:35 : hyperscript
19:36 : library the way i generate an li element
19:39 : is like this
19:41 : okay so
19:43 : so this
19:44 : this statement should map each person
19:47 : into an li element so at the end
19:51 : i should expect to get a list of lis
19:56 : um so there are yeah
19:58 : lists of allies and then i'm gonna make
20:01 : a
20:03 : ul element an unordered list
20:07 : and
20:08 : again i'll use hyperscript to give me a
20:10 : ul element
20:12 : and this this time
20:14 : i'm gonna
20:16 : take the lis
20:18 : and give it to the ul as its children
20:21 : and i can use this spread operator like
20:24 : this to do it
20:25 : so at the end i'm gonna should end up
20:27 : with like ul element that has a list of
20:30 : these people
20:32 : as the li element
20:35 : and then after that
20:37 : how about we do
20:38 : we just append it to the body of this
20:41 : document
20:43 : so
20:44 : this is a
20:45 : just
20:47 : the native dom api for appending one
20:50 : element onto another to append child
20:54 : and so if we do this
20:57 : um
20:58 : and we try to
20:59 : execute this javascript in our web page
21:03 : let's try that and see what happens
21:12 : maybe i'll do yeah
21:23 : [Music]
21:26 : okay let's let's give
21:29 : this thing a title i'll say web pack
21:32 : demo
21:35 : and then
21:37 : i'm gonna put a script in the body
21:43 : it's the last thing inside the body
21:52 : okay so i have this index.html
21:55 : file
21:56 : and now i'm going to
22:00 : open it in my web browser
22:04 : and let's see what happened i don't see
22:06 : the list of people
22:08 : um
22:09 : and i'm getting an uncaught syntax error
22:13 : that says cannot use import statement
22:16 : outside a module
22:18 : so
22:20 : um
22:21 : the problem is we're using import
22:24 : statements and the browser isn't letting
22:28 : me use import statements at the moment
22:31 : as i as i did mentioned earlier
22:34 : i could
22:35 : use esm modules
22:38 : but in order to use esm modules i would
22:42 : need to do something like
22:45 : i have to tell the browser that i'm
22:47 : using esm modules like this
22:50 : um but
22:52 : i'm not gonna do that here because
22:54 : that's not what this talk is about uh in
22:57 : this talk we're using webpack
23:00 : to grant us the feature of javascript
23:03 : modules
23:04 : so
23:05 : what we'll do instead
23:07 : is use webpack
23:09 : to pre-process our source code
23:13 : so that it's
23:14 : it's been sort of
23:17 : uh the the ability to import stuff
23:20 : will be granted to us by webpack when we
23:23 : use webpack to do this so how how do we
23:26 : use webpack to do this oh one thing i
23:28 : want to also mention is i i have created
23:31 : this um
23:32 : github repository
23:35 : which is going to
23:38 : have all of the source code that i'm
23:39 : creating here and it also has links
23:44 : to the various documentation
23:46 : in the webpack
23:48 : documentation site
23:50 : uh which
23:52 : uh which that's how i learn all of this
23:54 : myself
23:55 : so you can take a deeper look into each
23:58 : of the things i cover in this talk uh on
24:01 : your own time
24:03 : um
24:04 : and speaking of which
24:08 : uh speaking of which i kind of want to
24:12 : like i do do commit as i go so maybe
24:15 : what i'll do
24:16 : now is
24:19 : to get in that and then i'll just do a
24:21 : commit
24:23 : right now
24:25 : [Music]
24:26 : i will definitely want to
24:30 : ignore the node modules folder
24:39 : and i want to ignore the package lock
24:43 : folder as well
24:47 : okay
24:48 : and then i'll add everything i'll say
24:52 : uh
24:52 : first commit
24:55 : this is a uh
24:58 : installed webpack
25:02 : and
25:04 : made first
25:06 : index.js file
25:09 : okay
25:10 : so okay so now the question is how do we
25:13 : use webpack
25:15 : to pre-process our source code so that
25:18 : we get modules
25:21 : let's do that so
25:23 : i believe
25:24 : the way is
25:26 : you call the webpack script uh
25:29 : you can't
25:30 : quite just do that because we when we
25:34 : install dependencies they go into our
25:36 : node modules folder
25:38 : um
25:39 : what you could do is go inside the node
25:41 : modules folder
25:43 : and find the webpack
25:45 : executable
25:47 : here
25:48 : it's under your node modules folder and
25:50 : then that bin
25:52 : and then there's webpack so if we run
25:54 : that
25:56 : it will do its thing
25:59 : it will actually look for this specific
26:03 : file
26:04 : source index.js
26:07 : um
26:08 : [Music]
26:09 : hold on
26:11 : i think it did yeah
26:15 : i think it did do that okay and uh and
26:18 : what it did is take this file
26:21 : read
26:22 : read through it to find any import
26:24 : statements and if they are import
26:27 : statements
26:28 : it will take the source code of the
26:30 : module that was imported
26:32 : and
26:34 : sort of replace this import statement
26:36 : with the actual source code of the
26:38 : module itself in a sense
26:41 : um we can and and what it has created is
26:44 : this dist folder
26:46 : it stands for distribution like if you
26:48 : want to distribute your source code onto
26:50 : the website
26:52 : and
26:53 : and
26:54 : if you look into this main.js that it
26:57 : has created
26:58 : uh
26:59 : you can't really read this
27:03 : because it's been minified it it or
27:06 : uglified whatever you want to call it
27:09 : but uh for educational purposes
27:12 : uh i want to be able to read it
27:16 : so the way to do that
27:18 : i believe
27:20 : is
27:22 : uh
27:24 : oh one one thing about calling webpack
27:27 : this way uh if you don't like
27:30 : having to type
27:32 : this long
27:34 : bit
27:35 : just to be able to run webpack a
27:38 : slightly shorter way to do it is npx
27:42 : type npx webpack
27:45 : and it will do the same thing and npx
27:47 : also has a bunch of other super powers
27:50 : such as it'll automatically install the
27:52 : thing for you if it's
27:54 : not already there
27:56 : um
27:57 : but
27:58 : now what i want actually want to do is
28:01 : to set the mode
28:03 : uh
28:05 : oh it has this
28:07 : warning message for me
28:09 : says you you should have to set the mode
28:13 : uh
28:14 : where was that yeah you should have to
28:16 : set the mode to development or
28:18 : production and i haven't done that and
28:21 : it defaults to production
28:24 : so if i want to set the mode
28:27 : how do i do that uh well i
28:31 : let me i'm going to look at the helper
28:33 : manual
28:35 : and i should see
28:44 : where's the mode
28:46 : uh is it and
28:50 : oh here
28:51 : dash dash mode
28:53 : um
28:55 : okay
28:56 : so i'm gonna i'm gonna do dash dash mode
28:59 : and set the mode to development
29:03 : um
29:04 : yeah and now so so when i didn't do this
29:08 : what it did by default was set it to
29:10 : production okay
29:12 : but now that i have set it to
29:14 : development
29:18 : the
29:20 : the
29:21 : output
29:22 : of the file that it
29:24 : generated now looks like this
29:28 : but this is still horrible
29:31 : it has put
29:33 : it has put the source code of each
29:35 : module
29:36 : inside an eval
29:39 : and even if you even if you don't hate
29:42 : eval which i know most javascript
29:45 : developers do
29:46 : but even if you don't hate eval
29:49 : um
29:50 : this is still hard to read and this is
29:53 : this is only done in development so
29:55 : maybe that's the savings saving grace
29:58 : there
29:59 : but uh this is still hard for me to read
30:01 : so
30:02 : again for
30:04 : educational purposes
30:06 : i actually want to
30:10 : um
30:11 : actually want to uh
30:13 : show you the code in a mode that's more
30:16 : readable
30:18 : and that mode is
30:20 : we have to find that mode in the
30:24 : dev tool option
30:26 : uh the dev tool option for some reason
30:28 : by default we're using the eval mode
30:31 : which as you can see is not that helpful
30:34 : uh
30:35 : a any version that's easier to read is
30:38 : actually source map okay so we're gonna
30:41 : use the source map mode
30:44 : in addition to the the development mode
30:47 : so i think this is def tool
30:50 : source map
30:54 : and now
30:56 : hopefully
30:58 : yeah
30:59 : now now i have something that's actually
31:01 : more readable
31:03 : after i have used the development mode
31:06 : and for the dev tool option i put in
31:09 : source map
31:11 : so now
31:13 : if we
31:14 : sort of scroll through and look at this
31:16 : code um each module's source code
31:21 : is embedded in this
31:23 : very large potentially very large
31:25 : main.js file
31:27 : and
31:30 : the first one is actually a module
31:32 : called the browser split
31:35 : and i have a suspicion it it's one of
31:38 : the sub dependencies of hyperscript
31:42 : so but but let's search in the main file
31:45 : for like one of our people
31:48 : we'll look for fabiano and and there is
31:51 : fabiano and you can see that this is our
31:53 : original source code
31:55 : um
31:57 : it went from our source code
31:59 : into this section of the main.js file
32:03 : and you can also see that each of the
32:06 : import statements
32:07 : in our source code
32:10 : has been replaced
32:13 : with one of these blobs
32:15 : uh
32:17 : so like
32:20 : so the the low dash
32:22 : the low dash import statement became
32:25 : this
32:26 : webpack require thing and then
32:30 : the output
32:31 : value became this long
32:34 : thing called low dash webpack imported
32:37 : module zero
32:39 : and that that ends up getting used
32:42 : wherever you actually use
32:45 : low dash like here lowdash.map
32:48 : they turn that into
32:50 : low dash webpack imported module0.map
32:55 : and then here i you know here i just
32:58 : used h
32:59 : for hyperscript and they turned that
33:01 : into a hyperscript webpack imported
33:03 : module one
33:05 : uh
33:06 : you know
33:08 : so so so that's how that's what uh
33:11 : that's what webpack has done for us like
33:13 : and and this is like pulling back the
33:15 : curtain to see the like the all the
33:18 : weird stuff that it has to do
33:21 : uh just to get
33:22 : modules to us basically so that's how
33:26 : modules works
33:28 : at least the way that webpack implements
33:31 : it and then the actual source code of
33:33 : hyperscript and lowdash is embedded
33:36 : you know above our source code
33:39 : somewhere in here and it's probably
33:41 : saved into some registry which is just
33:44 : an object that's holding the source code
33:46 : of all those modules
33:48 : okay
33:49 : um
33:50 : yeah so that's how modules work in
33:53 : webpack
33:54 : and i i wanted to show that to you
33:57 : but um
34:01 : but uh
34:02 : usually uh so this is what uh webpack
34:06 : does by default
34:08 : but usually you want to configure it in
34:10 : some way and the way you configure
34:13 : webpack is by creating a file
34:16 : called
34:17 : oh hold on i wanna
34:20 : commit
34:22 : [Music]
34:24 : oh
34:25 : actually i didn't have i didn't make any
34:27 : changes so i'm not gonna commit
34:30 : i'm gonna put this in the ignores okay
34:34 : uh
34:35 : so let's start configuring this guy and
34:38 : we're gonna add a webpack that
34:41 : config.js file
34:43 : and
34:44 : what this file looks so this file
34:47 : actually is supposed to be a module
34:51 : in the
34:52 : in the node.js sense it it's like a
34:56 : common js
34:57 : slash node.js module so we're going to
35:00 : export out from this module
35:03 : a configuration object that's how it
35:05 : usually works and here
35:08 : the the configuration file allows us to
35:11 : specify these two things that we
35:13 : specified on the command line so
35:16 : if we want mode
35:19 : to always be development we can specify
35:22 : that in here
35:23 : so we we no longer have to type it all
35:26 : out in the command like this like this
35:28 : and same thing with dev tool
35:31 : if we want source map to always be the
35:34 : selection then we put it in here
35:37 : um
35:39 : and
35:40 : yeah i'll just show you that
35:42 : so once we do this
35:44 : we can just call it like this and it it
35:47 : would respect those configurations so we
35:50 : see the same kind of style output here
35:53 : but the things we want to add is um
35:57 : let's add some more of the default
36:00 : configurations that we already are using
36:03 : to make them explicit and also
36:05 : let them know how to change them in the
36:07 : case that you want to change them so the
36:09 : file name
36:10 : output file name is main.js
36:13 : um
36:15 : that's what goes in here
36:18 : so you can change this sometimes i call
36:20 : it bundle.js
36:22 : but i'll keep it the same for now you
36:24 : can also change the path
36:26 : of where the directory name is that you
36:29 : want it to go
36:30 : um and usually you do it like this
36:34 : resolve
36:35 : path that resolve their name
36:38 : list uh but in order to do this you have
36:42 : to import this path
36:46 : module
36:48 : from node.js and we're using node.js
36:50 : stuff here okay um
36:53 : so
36:54 : next thing is we actually want to like
36:58 : now that this
36:59 : sort of we generated a file that has the
37:02 : modules in it
37:04 : uh
37:05 : it should be able to
37:08 : run this
37:10 : mod generated module generate the
37:12 : main.js
37:14 : in our web page and we should expect
37:16 : that to work so let's just give that a
37:19 : try
37:21 : yep there's there's our list of people
37:23 : on the web page so that proves that it
37:26 : worked okay
37:27 : um
37:28 : but we could also do it in a more
37:31 : streamlined way uh we could uh
37:34 : use something called the
37:36 : html webpack
37:38 : plugin
37:40 : uh which i think we have to install
37:43 : uh and what what what that does is
37:46 : it'll allow you to specify a template
37:50 : html file
37:52 : that you want to use but it will
37:54 : automatically insert this script tag
37:57 : there
37:58 : so that
37:59 : you don't have to depend on
38:02 : knowing exactly what the output
38:05 : generated javascript file's name is
38:08 : so you can write it like this so i'll
38:10 : show you how to do that this is a very
38:12 : common thing to do with webpack so i'm
38:14 : going to say npm install
38:18 : a
38:19 : html web
38:21 : webpack
38:22 : plugin
38:25 : i'll just save
38:33 : okay and then
38:35 : i'm gonna go into my webpack
38:37 : configuration here
38:39 : and i have to register it as a plug-in i
38:42 : have to tell webpack hey
38:45 : this is my list of plugins
38:48 : and i'm gonna add the uh oh i have to
38:51 : import it first
38:53 : html
38:56 : webpack
38:58 : plugin uh equals require
39:02 : html
39:04 : webpack
39:05 : plugin
39:07 : okay i required this webpack
39:09 : unfortunately we're using the
39:11 : require syntax for modules
39:15 : this is this file gets run in the
39:17 : node.js context we're going to use the
39:20 : old way of using node.js modules
39:24 : so once you have required this guide
39:27 : we're gonna do
39:29 : put a new instance of the html webpack
39:32 : plugin into the uh plugins array and
39:36 : we're gonna put down
39:38 : and tell it we're gonna use our own
39:41 : this one our own
39:43 : index.html we're going to use this file
39:46 : as
39:47 : the template
39:48 : for you to generate
39:52 : an html file which will end up going
39:54 : into the dist folder
39:56 : okay
39:58 : so now
39:59 : if we run
40:00 : npx webpack again
40:04 : to regenerate everything
40:06 : uh if we did it
40:08 : right which i have an extra semicolon so
40:12 : let me fix that
40:15 : so let's try that again oops
40:17 : i did another thing wrong
40:20 : okay i'm gonna need a uh object literal
40:23 : here
40:24 : because that's an entry inside the
40:26 : object
40:29 : okay so now it did the same thing it did
40:33 : before
40:35 : uh except that it also gen should have
40:37 : generated an index.html file and put
40:40 : that into its dist folder yeah you can
40:42 : see that
40:43 : so now we can say hey everything in the
40:46 : dist folder if we just deploy that to a
40:49 : web server
40:51 : then the app has everything it needs to
40:54 : run
40:56 : and
40:57 : one way we can prove that is
41:00 : if you
41:01 : have python
41:03 : in python you can run
41:05 : one line
41:10 : i think you do directory dist
41:13 : you can
41:16 : http server
41:20 : um
41:21 : so in python you can run this one line
41:24 : command and you get a web server
41:27 : and we're basically saying
41:30 : make
41:31 : make this
41:32 : dist directory
41:34 : the root directory of the web server and
41:37 : if we did that and we went to a web
41:38 : server we would get the app fully
41:41 : working so that proves that
41:43 : this works
41:47 : okay so i'm gonna add
41:50 : i'm gonna commit this i'll say
42:02 : okay
42:03 : any questions before we before i move on
42:06 : i i don't know if i'm going too fast too
42:09 : slow or what
42:11 : okay
42:14 : um okay so now that we have this working
42:20 : let's look into
42:21 : code
42:23 : hot reloading
42:25 : um
42:26 : [Music]
42:28 : yeah yeah let's let's look into code hot
42:32 : reloading so
42:33 : so i
42:35 : the problem with this setup is
42:37 : after every time
42:39 : after changing
42:41 : something
42:42 : like uh if i wanted to add some people
42:48 : um after i modified this source code i'm
42:52 : gonna have to rerun
42:54 : this
42:55 : this webpack
42:57 : to tell to build everything again
42:59 : and that's kind of tedious
43:02 : it'd be nice if it just did that
43:05 : automatically so i don't have to
43:07 : manually come in here and do it
43:10 : so
43:10 : uh webpack has a solution for that
43:14 : uh and it's called webpack dev server
43:18 : so we're gonna
43:20 : do that so and that is documented
43:27 : [Music]
43:30 : that's documented here
43:35 : okay
43:37 : yeah the documentation i've listed them
43:40 : here so
43:41 : okay so i'm gonna do that i'm gonna
43:43 : install
43:45 : webpack
43:46 : dev server
43:49 : and save that as a development
43:51 : dependency
44:06 : okay and
44:09 : then i i
44:11 : suspect
44:12 : that might be all we have to do
44:14 : and then i say webpack surf i be believe
44:18 : npx instead of a webpack normal
44:21 : i do webpack surf
44:24 : and then it should have started a server
44:29 : and it's telling me the server is at
44:31 : port 8080 so i'm gonna go to
44:35 : localhost
44:36 : port 8080
44:40 : and there's my app and uh
44:43 : and now
44:48 : now it it's hot reloading
44:50 : uh which means i should be able to
44:55 : um
44:57 : even
44:58 : add more names
45:00 : yeah
45:01 : and it the hot reloading will
45:03 : automatically
45:05 : refresh the app
45:10 : and add the names there automatically so
45:15 : yeah not only will it automatically
45:18 : recompile
45:20 : the source code using webpack
45:22 : it'll also tell the browser to reload
45:25 : itself so that browser reloads the new
45:28 : code
45:29 : that has been generated and put into
45:32 : this main.js that was previously
45:35 : generated
45:36 : so
45:37 : that's nice
45:39 : i think most web developers are kind of
45:41 : used to this kind of development
45:44 : workflow
45:45 : this kind of convenience
45:47 : and um
45:48 : you know all the other major frameworks
45:51 : have this like all three of these have
45:54 : this and all three of them
45:56 : are probably using webpack dev server to
46:00 : to do this for developers
46:05 : hey do they do they hide all the
46:07 : configuration from you or is that
46:09 : exposed somewhere
46:11 : um so in
46:13 : different different frameworks have made
46:15 : different choices um
46:18 : in angular and
46:20 : i think in vue.js they allow you to pass
46:24 : in a configuration
46:27 : um i i don't know
46:29 : i haven't looked too deeply into it but
46:31 : i think vue.js explicitly allows you to
46:34 : say
46:36 : hey you want to configure your webpack
46:38 : in a specific way
46:40 : pass in this object
46:42 : i'll take your configuration and merge
46:44 : it with my webpack configuration
46:48 : uh
46:49 : i think angular you might need a plug-in
46:52 : install some kind of angular plug-in to
46:55 : get the same kind of configuration
46:57 : options
46:58 : uh
46:59 : react takes a more strict approach which
47:03 : is
47:04 : they said i don't want you messing with
47:07 : the webpack configuration
47:10 : but uh if you really want to do it
47:12 : you're gonna have to re
47:14 : you're gonna have to eject
47:17 : from
47:17 : [Music]
47:18 : the safety of my environment
47:22 : and at that point you're on your own and
47:25 : you're responsible for configuring
47:27 : webpack yourself
47:30 : uh however
47:31 : there there are uh
47:32 : in the react community there have been
47:35 : people that disagree with that sentiment
47:39 : and they have made plugins for react
47:42 : that allow you to pass in
47:45 : specific webpack configurations without
47:48 : having to eject so those things exist as
47:52 : well
47:53 : uh one that comes to mind is called
47:56 : react rewire
47:58 : that's probably the class yeah react app
48:01 : rewired
48:02 : allows you to do just that
48:06 : so i guess
48:08 : the answer to your question is
48:10 : kinda so yes and no
48:13 : sort of it depends
48:15 : but but know that internally all three
48:18 : of them are in reality
48:20 : are having to do
48:22 : what we're doing right now but they just
48:25 : have automated it
48:27 : for you
48:30 : um okay
48:32 : so the next thing i i think
48:34 : due to the time i'm kind of running low
48:37 : on time
48:39 : i'm actually going to skip
48:40 : the css
48:44 : part
48:47 : because i want to
48:49 : i want to show typescript and react
48:53 : i think those are more important
48:55 : so let's dig into how to set up
48:58 : typescript so
49:01 : um
49:03 : okay i'm gonna stop the dev server
49:09 : okay and so let's say i instead of i
49:13 : wanna use typescript in my project
49:15 : instead
49:17 : so i'm going to rename my index.js to
49:20 : index ts
49:24 : okay i just did that so now it's
49:26 : typescript
49:28 : i'm not using any typescript features
49:30 : yet
49:30 : but uh but this is typescript
49:33 : you know anything that's javascript is
49:35 : typescript
49:37 : but uh
49:38 : as you know the first thing you will
49:42 : need
49:43 : most likely
49:45 : is to create a
49:47 : tsconfig.json file
49:50 : um
49:51 : if you have ever sort of set up a
49:54 : project
49:55 : that uses
49:56 : typescript you would have had to do this
50:01 : and for now
50:03 : i'm not gonna configure anything but i'm
50:05 : gonna
50:06 : i'm gonna put a placeholder
50:08 : here
50:12 : oops come and for compiler options
50:17 : but i'm not gonna change anything
50:20 : but wait i have too many curly brackets
50:25 : okay i think this is what i want
50:27 : yeah
50:28 : okay so i'm just leaving it empty but
50:32 : we're gonna add something here later
50:34 : probably but i don't need to put
50:36 : anything
50:38 : uh just to get a working demo so i'm not
50:41 : gonna add anything
50:43 : um and now
50:46 : the thing we want
50:48 : is called the ts loader
50:51 : which is a
50:55 : with the basic setup anyway
50:57 : so webpack.org also has documentation
51:01 : for this which is very thorough so
51:05 : um it tells us to
51:08 : install typescript which is obvious that
51:10 : you would need to do but also install
51:12 : the ts loader and the ts loader is the
51:15 : webpack
51:16 : typescript plugin
51:18 : that will marry the typescript with the
51:22 : webpack so we'll we'll go ahead and
51:24 : install those things
51:44 : okay
51:46 : so now that we have these things we're
51:48 : gonna
51:49 : need to go into the webpack
51:51 : configuration
51:55 : and
51:57 : let's see let me look at my cheat sheet
51:59 : how to do this
52:00 : um okay so
52:03 : we're gonna need
52:04 : actually a bunch of rules and this is
52:07 : actually the first time that i'm talking
52:09 : about this
52:12 : rules
52:13 : array
52:17 : okay so i'm gonna spend a little bit of
52:19 : time talking about this so i'm i'm gonna
52:22 : set it up first
52:24 : um
52:25 : so we're gonna add a rule
52:28 : to the
52:32 : the internal
52:33 : of the webpack pipeline and the webpack
52:36 : pipeline is very much based on rules
52:41 : that tell webpack
52:43 : what
52:44 : actions to take
52:46 : in response to what files encountered
52:52 : and we can
52:53 : configure those rules to basically
52:58 : arbitrarily
53:00 : make webpack do anything we want
53:04 : like webpack is extremely configurable
53:07 : in that sense
53:09 : so to show you the rule that we're going
53:11 : to use for compiling typescript files
53:14 : that rule is going to look like this
53:22 : so first there's this test line
53:25 : and i'm going to blow up the font
53:36 : okay
53:38 : all right so so this test line that says
53:41 : hey
53:43 : this is a regular expression
53:46 : so yeah so this is a regular expression
53:48 : so any file that matches
53:55 : matches this
53:57 : irregular expression pattern
54:00 : uh
54:01 : with
54:02 : its name any file whose name matches
54:05 : this regular expression
54:07 : pattern
54:09 : we're gonna apply
54:10 : this rule
54:12 : so that this is a trigger for when this
54:15 : rule is activated but but what what is
54:18 : the thing that's activated
54:20 : well we're gonna say use ts loader
54:24 : so if you get if you hey webpack if you
54:27 : encounter any file that looks like this
54:31 : by the way this regular expression says
54:33 : it
54:34 : it ends with
54:36 : ts optionally with x at the very end
54:41 : this question mark means optionally
54:44 : this dollar sign means
54:46 : the end of the string so
54:49 : if you get that ts at the end of the
54:52 : string or optionally x at the end of the
54:55 : string
54:56 : then this test passes and if the test
54:59 : passes we're going to use ts loader
55:03 : [Music]
55:04 : we want to exclude
55:07 : the node modules folder
55:10 : if you if any of your node modules have
55:13 : typescript files in them we don't want
55:15 : to
55:16 : apply the ts loader on them because that
55:19 : could there could potentially be a lot
55:21 : of those
55:22 : and we don't want to spend the time
55:24 : doing that work
55:26 : so this is the rule that we're going to
55:28 : add
55:29 : to enable typescript
55:32 : for our project uh yes let's try this
55:37 : let's try this
55:38 : so i'm gonna run uh npx
55:40 : webpack one one more time
55:45 : yeah ouch
55:46 : what happened
55:52 : oh i forgot something
55:55 : we also need to add another section
55:59 : code resolve section
56:03 : [Music]
56:05 : as i understand it this is
56:08 : this tells the webpack when you
56:10 : importing things
56:12 : whenever you have an import statement
56:15 : and then
56:16 : webpack is looking into that import
56:18 : statement to decide
56:21 : this import
56:22 : refers to that module or that other file
56:27 : these are well we need to provide a list
56:29 : of extensions
56:32 : which are files that could potentially
56:36 : be modules
56:39 : so
56:40 : that's also needed
56:42 : hold on
56:48 : i misspelled something this is
56:50 : extensions
56:52 : plural
56:57 : okay uh that actually worked
57:00 : once i fixed those couple of mistakes
57:02 : so now
57:05 : um
57:08 : now i think typescript actually works
57:10 : and to prove that
57:12 : i'm gonna try to use something that's
57:15 : type scripty
57:16 : so
57:18 : so so let's first of all let's do um
57:22 : npx webpack
57:24 : surf
57:26 : we could easily add these as scripts
57:29 : in our package json file
57:34 : here so so you don't have to type those
57:36 : commands all out by hand every time
57:40 : uh
57:41 : i'll assume you know how to do that
57:45 : okay so now i'm gonna go back
57:49 : to
57:50 : this uh yeah so
57:53 : go back to this uh
57:55 : test web page for the app
57:58 : and
58:01 : and it seems to work uh
58:04 : wait whoops
58:07 : if we remove some names
58:11 : yeah the app updates and now if i add
58:14 : something that's
58:17 : type scripty like a name declaration
58:23 : add another person
58:25 : so it still works so it proves that is
58:28 : using typescript
58:30 : um
58:31 : and uh so
58:34 : so yeah so we're able to use typescript
58:36 : now these couple of things that might be
58:38 : annoying it says i don't know the type
58:41 : of low dash but that's prompting us to
58:44 : import the type declaration module
58:47 : for
58:48 : lowdash and which is usually
58:52 : add
58:54 : types slash the modules name if it
58:57 : exists so we'll go ahead and install
58:59 : that
59:00 : so app types
59:02 : go dash
59:06 : we'll do the same for hyperscript as
59:08 : well so nvm install ad types
59:12 : hyperscript
59:19 : and now
59:20 : my my code editor is happy
59:23 : it can resolve the types
59:25 : for low dash and hyperscript and i can
59:28 : it can it can verify
59:30 : and can infer
59:33 : the
59:34 : like the types that are coming out
59:37 : from based on calling
59:39 : the the functions from the libraries
59:44 : uh so so that's typescript um
59:48 : we're kind of
59:49 : out of time uh
59:53 : so i didn't get to everything um
59:57 : but maybe i should stop here
1:00:02 : and
1:00:04 : let you guys get back to
1:00:07 : the rest of your day
1:00:08 : um
1:00:09 : maybe i could cover some more in the
1:00:11 : future if there's interest
1:00:13 : um
1:00:15 : but uh
1:00:16 : yeah do you guys have any more questions
1:00:21 : no okay
1:00:23 : yeah nothing for me
1:00:27 : okay
1:00:30 : yeah okay
1:00:31 : in that case thank you for your
1:00:33 : attention
1:00:34 : and uh
1:00:35 : and i'll see you guys later