Coding

HTML + IMAGE LOADERS | Webpack 2 Basics Tutorial

  • 00:00:02 welcome to this video in this video
  • 00:00:04 we're going to learn how we can use HTML
  • 00:00:06 loader to dynamically copy an HTML file
  • 00:00:10 and inject our bundles automatically
  • 00:00:12 into it and how we may use a file loader
  • 00:00:14 to do the same for images basically this
  • 00:00:18 video builds up on this video where we
  • 00:00:21 already set up a basic web back to
  • 00:00:23 project allowing us to compile es6 code
  • 00:00:26 to JavaScript code with babel and s CSS
  • 00:00:28 code to CSS code you can find a link in
  • 00:00:31 the video description where you can get
  • 00:00:33 the starting code for this project I'm
  • 00:00:35 using here so with that let's dive into
  • 00:00:38 that project here and what you can see
  • 00:00:40 is I opened it in the webstorm and
  • 00:00:42 that's the basic project we're starting
  • 00:00:44 with CSS and JavaScript code here our
  • 00:00:46 webpage config file as mentioned before
  • 00:00:49 making sure that we compile the es6 code
  • 00:00:51 and s CSS code and that is everything
  • 00:00:54 for now that's nice but as mentioned at
  • 00:00:56 the beginning of the video I now want to
  • 00:00:58 tweak this set up and improve it a
  • 00:01:00 little bit more one thing I don't like
  • 00:01:03 is we have the index.html file sitting
  • 00:01:05 in the root directory here it kind of
  • 00:01:08 would make more sense to put it into the
  • 00:01:09 source directory to indicate that we of
  • 00:01:12 course may change this file too
  • 00:01:14 so that we are able to well change it
  • 00:01:16 and then copy it to the dist folder so
  • 00:01:19 that we do have it in our distribution
  • 00:01:21 folder too so that in the end also our
  • 00:01:24 dist folder contains everything we need
  • 00:01:27 to deploy right now if we run npm run
  • 00:01:30 build they'll project to be precise you
  • 00:01:33 will notice that we get a dist folder
  • 00:01:36 but in this this folder we actually only
  • 00:01:42 have to bundle javascript file the main
  • 00:01:44 CSS file and the index.html file is not
  • 00:01:46 inside the folder sort of this kind of
  • 00:01:48 counterintuitive
  • 00:01:49 whenever the thing I setup right now is
  • 00:01:51 I include the imports for script and CSS
  • 00:01:55 manually in the index.html file it would
  • 00:01:58 be nice to have one single workflow
  • 00:02:00 where it is done automatically and
  • 00:02:02 finally if we were to use images and we
  • 00:02:04 stored these images in the source folder
  • 00:02:06 that also would not work because we
  • 00:02:10 don't copy the image file over to the
  • 00:02:12 dist folder or something like that
  • 00:02:14 a couple of things we can improve and I
  • 00:02:16 will start improving that right now and
  • 00:02:19 I want to start by fetching an image so
  • 00:02:22 that we can see that this image copying
  • 00:02:24 and implementation actually works so I
  • 00:02:26 will simply search for webpack here
  • 00:02:29 since that sounds like a good image for
  • 00:02:30 this case and I will have a look at the
  • 00:02:32 P and cheese here because I want to show
  • 00:02:34 how to include such a PNG file and why
  • 00:02:38 don't we simply take this one year so I
  • 00:02:40 will simply save this image and of
  • 00:02:42 course you are free to choose any other
  • 00:02:44 image I will save it in the folder where
  • 00:02:47 I have this project we're working on
  • 00:02:49 right now and there in the source folder
  • 00:02:51 I create a new image folder and here I
  • 00:02:53 will insert the WebP egg logo dot PHP
  • 00:02:56 file a PNG file so with that we add a
  • 00:02:59 discharge X we can find it here in the
  • 00:03:01 image folder now the next step is I will
  • 00:03:03 move the index.html file entity source
  • 00:03:06 folder because that's the other thing we
  • 00:03:07 wanted to do to have that all in one
  • 00:03:09 folder and in the end also have it all
  • 00:03:11 in a dist folder and therefore in this
  • 00:03:14 index.html file and I want to include
  • 00:03:16 this image so I will add a div below my
  • 00:03:19 head in here where I will add an image
  • 00:03:21 tag and I simply want to point to the
  • 00:03:25 image folder and then the web pack logo
  • 00:03:28 PNG file and give it some alt text of
  • 00:03:31 web heck maybe so that's my index.html
  • 00:03:33 file set up well almost
  • 00:03:35 I also want to remove the script and the
  • 00:03:39 CSS imports because that's the outer
  • 00:03:40 part I mentioned I want to include these
  • 00:03:42 dynamically so that we don't have to
  • 00:03:44 hard code it into your with that the
  • 00:03:47 index.html file is prepared we get an
  • 00:03:50 image but of course the word flow is not
  • 00:03:52 at all in a state to handle this so
  • 00:03:54 let's add some new loaders to enhance
  • 00:03:57 our website configuration if we have a
  • 00:03:59 look at our packaged our JSON file here
  • 00:04:01 we see we already get a couple of
  • 00:04:03 loaders but we'll need some new ones so
  • 00:04:05 I will use NPM install – – save dev
  • 00:04:08 again to save them as development
  • 00:04:10 dependencies and store them as such new
  • 00:04:12 package JSON file and the loaders or
  • 00:04:16 packages of one install are the HTML
  • 00:04:19 loader for the HTML file the HTML web
  • 00:04:24 pack plug-in which will then create
  • 00:04:27 to recreate that HTML file based on the
  • 00:04:29 one we're using as a source so it will
  • 00:04:32 basically not just copy it it will
  • 00:04:34 create a new one but use the old one as
  • 00:04:35 a template you could say then the file
  • 00:04:38 loader to also copy some files like
  • 00:04:40 images in our case here and for now
  • 00:04:43 that's everything I will add something
  • 00:04:45 else later in this video though so these
  • 00:04:48 are the three new loaders or two loaders
  • 00:04:52 one plug-in I want to add and what's
  • 00:04:54 that I can go to my web config and
  • 00:04:56 adjust that so in there I'll simply
  • 00:05:00 start in the rules section and I'll add
  • 00:05:02 a new rule what I want to test for it
  • 00:05:05 being an HTML file so just as you
  • 00:05:08 learned it I'll test for the extension
  • 00:05:09 with this regular expression then I'm
  • 00:05:12 going to use something and that
  • 00:05:13 something is an array however I only
  • 00:05:15 have one loader and that's just the HTML
  • 00:05:18 loader so I can use that shortcut of
  • 00:05:20 putting just a string into this array
  • 00:05:22 like I do here so that already is the
  • 00:05:25 HTML loader all we need for that let's
  • 00:05:28 work on the loader for the images next
  • 00:05:29 that's an average JavaScript object in
  • 00:05:32 our rules array here I want to test for
  • 00:05:36 it being an image and of course you can
  • 00:05:38 have multiple formats I want to allow
  • 00:05:40 two formats here and the regular
  • 00:05:43 expression for that uses these
  • 00:05:44 parentheses you have a or condition in
  • 00:05:47 between so to say so here I will check
  • 00:05:50 if it's a dot jpg or with a pipe symbol
  • 00:05:52 a dot PNG file these file types can now
  • 00:05:56 be handled by this rule and there I will
  • 00:06:00 use my array of course I will add my
  • 00:06:03 loader and here when I add some options
  • 00:06:06 that's why I'm using the object notation
  • 00:06:08 the loader is the file loader but I also
  • 00:06:12 want to define something about where it
  • 00:06:14 just gets stored and how it should be
  • 00:06:16 named so add my options object cutis
  • 00:06:20 loader and now the file loader takes a
  • 00:06:22 couple of options and as always you can
  • 00:06:24 learn more about these options on the
  • 00:06:25 official page simply google for web hex
  • 00:06:28 file loader and you will find you get a
  • 00:06:30 page with the documentation so you're in
  • 00:06:33 options I wanted to find the name by
  • 00:06:35 default it would give it some hash so
  • 00:06:38 the normal file name you use
  • 00:06:41 or would be replaced by some random hash
  • 00:06:43 not there's nothing wrong with that you
  • 00:06:44 can do that but I want to keep the
  • 00:06:46 original name so I will simply use in
  • 00:06:49 square brackets name which is a variable
  • 00:06:52 which is recognized by file loader and
  • 00:06:55 means okay keep the old name then dot
  • 00:06:58 and then in square brackets you xed and
  • 00:07:02 you might be able to guess what it means
  • 00:07:04 however it should be enclosed in single
  • 00:07:07 quotation marks that whole expression
  • 00:07:10 and that suddenly means keep your
  • 00:07:12 original name and extension and why do
  • 00:07:15 we need to specify this as mentioned
  • 00:07:17 because by default file loader would use
  • 00:07:19 this random hash and you can also
  • 00:07:20 configure some other things about it and
  • 00:07:22 therefore this is what I want to use as
  • 00:07:25 a configuration here to simply copy the
  • 00:07:26 file you could say so that's the name I
  • 00:07:29 also want to tell it where to output it
  • 00:07:32 to with the output pause which also
  • 00:07:35 takes a string by default it would just
  • 00:07:37 shove it into our output folder which is
  • 00:07:40 our dist folder here now that is not
  • 00:07:44 what I want here I want you have it in a
  • 00:07:45 subfolder and that again it's just a
  • 00:07:47 personal preference you can leave it in
  • 00:07:49 the disk folder you can have all your
  • 00:07:51 assets into this folder in the end all
  • 00:07:52 your deployment artifacts here however
  • 00:07:56 as mentioned I want to have it in the
  • 00:07:57 image folder so I will put image slash
  • 00:08:01 here as output puff and I'll do the same
  • 00:08:04 for the public path the last option I
  • 00:08:06 want to set that all there will be image
  • 00:08:08 to inform it where it is now is so an
  • 00:08:11 output path we tell it copy it into the
  • 00:08:13 image folder but it will also
  • 00:08:15 automatically update our HTML file with
  • 00:08:18 the correct new place of this and we
  • 00:08:22 need to set this to public path to still
  • 00:08:24 well put image slash and then the name
  • 00:08:27 of the image into the index.html file it
  • 00:08:30 would not do that otherwise so out the
  • 00:08:32 purpose for copying the other one is for
  • 00:08:34 well keeping the correct reference in
  • 00:08:36 the places where we use this image so
  • 00:08:40 with that the image loader is prepared
  • 00:08:42 the HTML loader is prepared but the HTML
  • 00:08:45 loader
  • 00:08:46 is only one part of well what we need to
  • 00:08:49 set up with dead we basically extract
  • 00:08:52 any HTML it finds so in the HTML
  • 00:08:55 while in this case and we'll store it as
  • 00:08:57 text and that isn't useful for us we
  • 00:09:01 need to use another tool which we
  • 00:09:04 already installed we need to use the
  • 00:09:06 HTML web tag plugin this is a plug-in
  • 00:09:10 which will actually create a brand new
  • 00:09:11 HTML file but we can tell it that it
  • 00:09:15 should do so based on some template and
  • 00:09:18 what's a good template for an HTML file
  • 00:09:20 well besides other supported options
  • 00:09:23 like handlebars or ejs HTML of course
  • 00:09:26 and that is just what we store with the
  • 00:09:28 HTML loader so all we need to do now is
  • 00:09:31 we need to import this plug-in so the
  • 00:09:35 HTML web pack plug-in which we require
  • 00:09:39 from the package we just added HTML web
  • 00:09:42 pack plug-in and then in the plugins
  • 00:09:44 array at the bottom of our config I
  • 00:09:46 simply instantiate this plug-in with new
  • 00:09:50 HTML web pack plug-in and here I need to
  • 00:09:53 pass a JavaScript object where I
  • 00:09:55 configure it you don't have to do so in
  • 00:09:57 that case if you pass no configuration
  • 00:10:00 it would create a new index.html file by
  • 00:10:03 default
  • 00:10:03 give it some dummy title and that's
  • 00:10:05 important automatically and checked all
  • 00:10:08 your bundles you create so you main dot
  • 00:10:10 CSS file and the bundle torch as well so
  • 00:10:12 it would do that it will still do that
  • 00:10:15 if we add a tiny configuration the
  • 00:10:18 template configuration which will still
  • 00:10:21 create a index.html file so that is the
  • 00:10:23 name it will use which will still inject
  • 00:10:26 our bundles so scripts at the end of the
  • 00:10:28 body section and CSS code in the head
  • 00:10:30 section but which will in opposite to
  • 00:10:34 the usage without a configuration not
  • 00:10:37 prefilled this index.html file with some
  • 00:10:40 dummy text but instead take our HTML
  • 00:10:43 dummy so therefore here I can simply say
  • 00:10:45 the template should be our source in the
  • 00:10:48 XHTML file and this is then of course
  • 00:10:52 parsed by the HTML loader which fetches
  • 00:10:54 the HTML text which again is a valid
  • 00:10:56 template for the HTML file we're
  • 00:10:58 creating with this plug-in and with that
  • 00:11:00 everything will work so we're pointing
  • 00:11:02 to source index.html we make sure that
  • 00:11:04 we use that for the index.html file
  • 00:11:07 which gets created
  • 00:11:08 the dist folder and that already is a
  • 00:11:13 major step of what we need to set up now
  • 00:11:16 we're almost done when we're going to
  • 00:11:19 adjust though is the public path because
  • 00:11:21 keep in mind right now not right now the
  • 00:11:24 last time you configure this the
  • 00:11:26 index.html file was in the root folder
  • 00:11:29 so telling web pack that the path of our
  • 00:11:32 assets is in the distal der was correct
  • 00:11:35 that's not the case anymore
  • 00:11:37 now the index.html file will sit in the
  • 00:11:39 dist folder too so we can simply remove
  • 00:11:42 this comment it out for example the
  • 00:11:44 public path well in width is in place if
  • 00:11:47 we now run npm run build to start the
  • 00:11:50 web pack development server
  • 00:11:52 let's see dad looks alright here I guess
  • 00:11:56 no errors so if we now with it localhost
  • 00:12:00 8080 dad looks good we see the image and
  • 00:12:03 the rest is also still working here so
  • 00:12:07 that's all looking great let's also try
  • 00:12:10 our development build npm randall plots
  • 00:12:13 you create the dist folder and there we
  • 00:12:18 see we get an image folder with our epic
  • 00:12:21 file and in the index.html file we can
  • 00:12:23 see that it correctly points to that
  • 00:12:25 folder here we also see that it injected
  • 00:12:29 our bundle chairs script import and the
  • 00:12:32 main dot CSS import so this would all
  • 00:12:35 now all be prepared to be deployed and
  • 00:12:37 keep in mind we didn't add this here in
  • 00:12:39 the source folder this was in these
  • 00:12:41 injected you can't find the script or
  • 00:12:43 CSS import in here so that's working a
  • 00:12:47 one thing which I don't like is that
  • 00:12:49 this dist folder is always there and if
  • 00:12:52 we were to change something rename the
  • 00:12:55 created JavaScript bundle the old bundle
  • 00:12:58 would not get removed because it would
  • 00:12:59 constantly only add new files to the
  • 00:13:01 space folder so it would be nice if we
  • 00:13:04 could entirely remove the base folder
  • 00:13:06 before we start each build process so to
  • 00:13:09 say so that we build a completely new
  • 00:13:11 dist folder whenever we run npm run
  • 00:13:14 build prot turns out we can do that
  • 00:13:16 rather easily all I need to do is
  • 00:13:19 install one additional new plugin
  • 00:13:22 so with npm install' – – saved FL also
  • 00:13:25 stores new package.json file and it's
  • 00:13:28 called clean web pack plugin and there
  • 00:13:31 are other options of cleaning the dist
  • 00:13:34 folder you could use operating system
  • 00:13:37 commands in the package adjacent file in
  • 00:13:39 the script you could use our packages
  • 00:13:42 I'm going to go with that plug-in though
  • 00:13:44 so with that installed I can go to my
  • 00:13:47 website config file I'll need to import
  • 00:13:49 it here so the clean web pack plug-in
  • 00:13:52 which I also require from the package we
  • 00:13:55 just installed clean web pack plug-in
  • 00:13:57 well and then all I have to do is go to
  • 00:14:00 the bottom added here is the plugins
  • 00:14:02 array new clean web tech plug-in
  • 00:14:04 position doesn't matter and there I need
  • 00:14:07 to pass an array of all the folders I
  • 00:14:09 want to clean and that takes some
  • 00:14:11 strings I only want to remove one folder
  • 00:14:14 and that's the dist folder and as always
  • 00:14:16 Google this plugin to find more about
  • 00:14:19 the available options and how you may
  • 00:14:20 configure it so with that in place if I
  • 00:14:23 now run npm run build again build
  • 00:14:27 products use me you see the dist folder
  • 00:14:29 is not there right now
  • 00:14:31 but if I reload this directory structure
  • 00:14:33 you see it was recreated so now it will
  • 00:14:36 remove it remove the dist folder before
  • 00:14:39 creating a new one and that already is
  • 00:14:42 the finished workflow dead already
  • 00:14:44 is everything I wanted to show you how
  • 00:14:46 to copy images how to copy the HTML file
  • 00:14:50 and how to dynamically and check the
  • 00:14:53 import into da HTML file as well as
  • 00:14:56 clean up the dist folder when building
  • 00:14:59 the project I hope this was useful and
  • 00:15:01 hopefully see you in our videos you have
  • 00:15:03 a great time bye