Coding

WEBPACK + MULTIPLE HTML FILES | Webpack 2 Basics Tutorial

  • 00:00:01 welcome to this video in the last video
  • 00:00:04 I created on webpack I showed you how
  • 00:00:07 you could add HTML and images to your
  • 00:00:10 workflow so how you can get web pack to
  • 00:00:13 copy your HTML file basically and some
  • 00:00:16 of you asked if I could also show how
  • 00:00:18 you could work with multiple HTML files
  • 00:00:20 there are actually two great solutions
  • 00:00:23 for that
  • 00:00:23 now there are more solutions and you can
  • 00:00:25 simply Google to find more but here are
  • 00:00:27 my two favorite solutions I will use the
  • 00:00:31 same plugin we used before the HTML web
  • 00:00:34 pack plug-in in one of the two solutions
  • 00:00:36 and the average solution I will use the
  • 00:00:39 file loader to copy the HTML file so
  • 00:00:42 let's have a look at about solutions now
  • 00:00:43 I want to start with the HTML web pack
  • 00:00:47 plug-in but for both solutions I
  • 00:00:49 actually need an additional HTML file
  • 00:00:52 right now I get my index.html file here
  • 00:00:55 in the source folder and to keep it
  • 00:00:57 simple I will simply add a second one
  • 00:00:59 which it will name users dot HTML now
  • 00:01:02 whatever name you like of course now
  • 00:01:05 this file exists in this folder too
  • 00:01:07 obviously and now of course I want to be
  • 00:01:10 able to well visit this file in the end
  • 00:01:13 so do you copy it into the dist folder
  • 00:01:17 which we create I now need to go to my
  • 00:01:19 website conflict or chess file and when
  • 00:01:22 using the HTML web pack plug-in a very
  • 00:01:25 simple way of using multiple HTML files
  • 00:01:27 is to simply duplicate this plug-in call
  • 00:01:31 here so I'll simply add a new one in
  • 00:01:34 there like this and I here of course I
  • 00:01:37 point to the users dot HTML file of
  • 00:01:40 course this has downsides that you need
  • 00:01:43 to know which HTML files you use at the
  • 00:01:45 point of time you create your config so
  • 00:01:47 it's not a very dynamic approach if
  • 00:01:50 you've got an app here where you add one
  • 00:01:53 or thousand HTML files then this might
  • 00:01:56 not be the approach you're looking for
  • 00:01:57 but if you have for example just the
  • 00:01:59 index.html file and then a 404 HTML file
  • 00:02:03 to handle such errors there's my PD
  • 00:02:05 approach you are looking for now of
  • 00:02:07 course if I just drop in a line like
  • 00:02:09 this what this plug-in would do is it
  • 00:02:12 would still create only one index.html
  • 00:02:15 file and simply use users HTML as the
  • 00:02:18 template now since it comes second here
  • 00:02:20 so that of course is not the behavior
  • 00:02:22 one so I will give these files created
  • 00:02:24 by the plug-in explicit file names I can
  • 00:02:27 do this by adding the file name or
  • 00:02:30 configuration or option here and we
  • 00:02:33 could name this first one index.html
  • 00:02:35 which is the name of the file you want
  • 00:02:37 to copy and I'll keep the volume of the
  • 00:02:39 second file too
  • 00:02:40 so name this users HTML of course you
  • 00:02:43 could rename it to something else here
  • 00:02:44 now with this setup here you can now run
  • 00:02:48 npm run build to start your web tag dev
  • 00:02:52 server again and if you now with it
  • 00:02:55 localhost 8080 you see the index.html
  • 00:02:58 file we created in the last video and
  • 00:03:00 now if we wizard users HTML well we
  • 00:03:05 don't see anything here but this error
  • 00:03:08 which I guess makes sense because what
  • 00:03:11 happens the HTML plug-in here
  • 00:03:14 copies the user's HTML file creates the
  • 00:03:17 users HTML file which we do find if this
  • 00:03:20 would not be the case so if we try to
  • 00:03:22 find a file which doesn't exist we get
  • 00:03:24 this error here so we do find the file
  • 00:03:29 but in the file if we have a look at the
  • 00:03:31 Dom let me increase this you see that it
  • 00:03:37 still tries to import our bundle and
  • 00:03:39 that is just what the HTML plug-in does
  • 00:03:41 it does not just copy a file it also
  • 00:03:44 injects your bundle into it that's the
  • 00:03:45 idea behind this template now what you
  • 00:03:49 can do here is you can add the chunks
  • 00:03:52 options at this to an empty array let me
  • 00:03:56 restart this server here and I will
  • 00:03:59 reload this page and now you see we
  • 00:04:02 don't get an error here in the console
  • 00:04:04 because now we also don't try to import
  • 00:04:06 this because what's the chunks option on
  • 00:04:09 this plug-in you can define which chunks
  • 00:04:12 you will which build artifacts so to say
  • 00:04:14 should be injected into that edgy HTML
  • 00:04:17 file so for the first one index.html if
  • 00:04:20 we go back to that page you see it's
  • 00:04:23 still injected everything because there
  • 00:04:24 we don't specify chunks but here since
  • 00:04:27 we set chunks to an empty our
  • 00:04:28 it doesn't check anything now just to
  • 00:04:31 complete the picture with these chunks
  • 00:04:33 so now we use an empty array to tell it
  • 00:04:35 well don't add any chunks what is a
  • 00:04:38 chunk now if you would want to tell it
  • 00:04:40 hey please include our bundle chairs
  • 00:04:43 file here again we would need to define
  • 00:04:45 entry a bit differently we could write
  • 00:04:48 it as a JavaScript object here and set
  • 00:04:51 app for example that's just the one
  • 00:04:53 possibility you can choose any property
  • 00:04:55 name you like here and now this would be
  • 00:04:57 our app junk everything which is created
  • 00:05:01 from this entry point here and then we
  • 00:05:03 could define app here as a string and
  • 00:05:06 now if I restart this server and we
  • 00:05:09 wizard our users HTML file again and I
  • 00:05:12 reload this you now see we get the error
  • 00:05:15 again because now it injects this bundle
  • 00:05:18 again so that is how we can control this
  • 00:05:20 with chunks and how we overall with
  • 00:05:22 chunks and the file name at the second
  • 00:05:24 web peg plug-in call here can make sure
  • 00:05:27 that we just copy that file again the
  • 00:05:30 limitation of this approach clearly is
  • 00:05:32 that we have to know which files we have
  • 00:05:35 at the point of time we write this
  • 00:05:37 configuration here and that might not be
  • 00:05:40 the case for our setup so I will leave
  • 00:05:43 it like this but there is only one
  • 00:05:45 option we do have another one now for
  • 00:05:48 this other option or comment out this
  • 00:05:51 plug-in call a leaf to change on the
  • 00:05:54 first one doesn't matter if we
  • 00:05:55 explicitly named it index.html that
  • 00:05:57 would have been the name anyways but now
  • 00:05:59 I want to load that HTML files
  • 00:06:01 differently from within our code so
  • 00:06:04 let's say we don't know it at the point
  • 00:06:06 of time we write our configuration but
  • 00:06:09 certainly at the point of time we write
  • 00:06:10 our app so then we could say we want to
  • 00:06:13 load our users HTML file and I will
  • 00:06:16 actually go in my app dot J's file
  • 00:06:19 remember that it is in this file where
  • 00:06:22 we also load our F CSS code so we're not
  • 00:06:25 limited to including JavaScript here we
  • 00:06:27 can also include other assets of which
  • 00:06:29 you want to make web pega where
  • 00:06:31 basically so what we can do here is we
  • 00:06:34 can also import our HTML file so we
  • 00:06:38 could say import and now go up one level
  • 00:06:42 then not en excuse me the users HTML
  • 00:06:45 file like this now that looks super
  • 00:06:47 strange but this will actually work as
  • 00:06:50 you will see so now I'm importing that
  • 00:06:53 but of course web peg doesn't know how
  • 00:06:55 to handle this so let's go to the web
  • 00:06:58 peg config and here I will copy my rule
  • 00:07:01 I created four images
  • 00:07:03 we'll simply add it below there and here
  • 00:07:07 I want to check for HTML files and you
  • 00:07:10 could of course also change this
  • 00:07:11 expression to also to take HTM files
  • 00:07:14 so that's HTML and I'm going to use the
  • 00:07:16 file loader I want to keep name and
  • 00:07:19 extension but the output path it should
  • 00:07:22 just be slash and the public path
  • 00:07:25 therefore to which I don't need to
  • 00:07:27 specify so actually we can omit the
  • 00:07:29 output pop to now what's the file load
  • 00:07:31 rule setup I need to tweak it a little
  • 00:07:33 bit though I need to add exclude to make
  • 00:07:36 sure that I don't also copy the
  • 00:07:39 index.html file because what we have to
  • 00:07:42 keep in mind here is that we do include
  • 00:07:46 the index.html file into our web pack
  • 00:07:48 build process right we do that here so I
  • 00:07:51 need to exclude it and this actually
  • 00:07:53 takes an absolute path so I'll use pop
  • 00:07:56 resolve again your name and now we're
  • 00:07:59 then in the source folder and then we
  • 00:08:01 take the index.html file so don't want
  • 00:08:03 to include this in my rule whoops should
  • 00:08:06 be without that slasher down so with
  • 00:08:08 this if we now restart and people run
  • 00:08:10 build with this exclude thing edit your
  • 00:08:13 overall HTML rule it should work that if
  • 00:08:17 we now visit our page and I reload here
  • 00:08:19 in XHTML still works
  • 00:08:20 and if we go to users HTML it seems to
  • 00:08:23 find this file and let's now finally add
  • 00:08:26 at least some content to it make this
  • 00:08:28 maybe an HTML page users page and most
  • 00:08:32 importantly let's add something here
  • 00:08:35 into our h1 tag let's save this and
  • 00:08:38 reload the page and we see the user's
  • 00:08:41 page so this is now working and this is
  • 00:08:43 how you could copy multiple HTML files
  • 00:08:46 either by using the HTML web pack
  • 00:08:50 plug-in if you know how many files it's
  • 00:08:53 going to be at the point of time you
  • 00:08:54 write
  • 00:08:55 conflict you set up your workflow or
  • 00:08:57 using the more dynamic solution where
  • 00:09:00 the name port here is imported up here
  • 00:09:02 and then the file loader now if you
  • 00:09:05 search for it you'll find more and
  • 00:09:07 different solutions may be solutions
  • 00:09:08 which better fit your use case but that
  • 00:09:11 would be two ways of doing it