HTML + IMAGE LOADERS | Webpack 2 Basics Tutorial

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

Channel: Academind

Views: 73,114

Keywords: webpack, webpack2, webpack 2, tutorial, html-loader, file-loader, html

Id: CzLiXgRUt4g

Length: 15min 7sec (907 seconds)

Published: Thu Apr 06 2017