Configure a React App using Webpack and Babel | Raymundo CH | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Configure a React App using Webpack and Babel

teacher avatar Raymundo CH

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

10 Lessons (1h 11m)
    • 1. Welcome!!! Configure a React app using Webpack from scratch

      2:18
    • 2. Create a Server using ExpressJS

      8:52
    • 3. Understand how React and Webpack work together

      8:49
    • 4. Setting up Babel which translates React code into Javascript

      9:00
    • 5. Using Babel to translate React App into Cross-Browser Javascript

      5:16
    • 6. Minify React code using Webpack and Babel

      8:50
    • 7. Attach Javascript file into HTML using Webpack

      8:50
    • 8. Handle CSS styles with Webpack

      5:38
    • 9. Adding images by using Webpack

      7:07
    • 10. Last improvements to the Webpack configuration file

      6:48
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

50

Students

--

Projects

About This Class

When starting to learn about the React library the official documentation offers a command-line tool to scaffold a React app. When using such command-line tool a  root folder is created  along with a bunch of files and configurations  without further explanation of what it is or how it was created. If you take a look certain words come up, like webpack, webpack.config.js, babel , module.exports and more. if you want to know what those weird things are then this course is for you!!!

Meet Your Teacher

Teacher Profile Image

Raymundo CH

Teacher

Hello, I'm Raymundo. I like web development because it represents a challenge all the time. Learning programming languages is fun and is a challenge for the mind. 

Since I heard about NodeJs some years ago I felt curious because they said it was possible to create a complete web app using javascript solely. It was very interesting. 

At first it was hard to understand NodeJs because the way it works differs a lot from the traditional approach, even the way to deploy and app changes  and the companies that store your app offer a set of different and weird  products!! so it was an adventure for me.

Nowadays I've understood NodeJs and I'm here to share with you my knowledge in a simple way. I hope you enjoy my videotutorials and send me feedback plea... See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Welcome!!! Configure a React app using Webpack from scratch: Hello, guys. Well, in these video tutorials, you are going to understand help toe configure our react application you seen with back when we first I start learning, learning how toe use react. Now sometimes we see that a react application is made up off a set off directories, files on configurations. If we take a look to the configuration off I react application, we can see that those fires on directories, andi, especially the configuration files, are very hard to understand. If you are a beginner or you don't have too much experience with react, probably you will find yourself asking too many questions about how how react how react application works. What are the underlying layers off a react application If you want to understand how, Rita, how react application works. Ah, and if you want to understand all that configuration files that are found in a react application thes by it video tutorial is for you because this period tutorial will eggs will explain to you how to create a react application from scratch so that you can understand what happens inside a react obligation. So, um, I hope you can check these bigot Vitoria is very is a very short period tutorial on this is very easy to understand as well. Well, guys, I hope you can check this video tutorial. You are going toe to love it. You're going to like it. Andi. So you like the guys by 2. Create a Server using ExpressJS: Hello, guys. Thanks for watching this video in this video. I'm going to show you how you can create Coelho. You can configure our react application you seen with back. The first step is toe create the roof further for your application. In this case, I'm going to create the root folder in the East disc Stop off my my computer Onda, The name off the root folder will be react React up when pre act up one. Once I've I've created the root folder, I'm going toe open the common prompt and I'm gonna navigate. So that folder So I typing change directory, react when? And as you can see now I am inside the root folder Now I have toe I mean, no puckish man a year. Anything in order to configure, uh, Buckeyes Jason Vale, The command prompt is going to ask me some questions on I have to reply those questions in order to configure the pack Ice Pack Association file. Now you can see the first question says backers name. I hit. Enter. Uh Then the next question is version hit. Enter, then a description in this case is react on with back enter entry point will be server Dr J . My script this comment Hit, Enter, enter keywords react. Ah, with back with fact outdoor will be my name, which is right now. Andi listens. Hit Enter on night 18. Yes, I hit. Enter again. And as you can see me back my back Ice Jason five has been created. Now I have toe open theme. The soup line takes a writer both writer, um, I I'm gonna open the root for their for my project, so I'm going toe navigate. So the the folder using the the files, bro. Sir, off my computer. Now, in this case, I save the root directory in the the stop. So I select react up one. Andi, um, as you can see, um, this is my my backlash backlash. Jason file. Now, as you can see, this is my bookish Jason file. I think the next step is toe to create a file. So I heat a new file. I'm going toe save these files us on a server dot Yes. And of course, this file is going to be, uh, where I'm going to create my configuration for for my server. So I think bean const express. Uh, require express. It's express. Now, Jones going up, uh, express again. Guns, but require, but and, uh, well, I think this is what I need s o far. I'm going to configure report as well. Guns. Port equals process dot Enviromental the port. Um, that was in. Now I'm going to configure your eyes. That X server. So I have toe, I wanna type typing a comment here. Uh, static server. These static server is going to serve my my CSS files as well as my images or my pictures like, Well, the aesthetic server eyes the server that is going to serve images or pictures as well a CSS files in order to configure aesthetics ever going to die Bean abuse express about study . Ah, but don't join. Um, dear. Name your name. Remember that your name contains the but so they wrote folders. And now I have to, uh, toe typing the name off the folder where my CSS files on my images will be a store in this case before there will be beast. Andi, where, as you can see, I don't have the the father released, so I'm going to create that folder. So I think in the East and I just created and you for them. Now I'm going to create, um wrote So I'm going toe Create a comment. I wrote roads in order to create a road. I'm going to die pain up. Don't get Ben eyes slash and I'm going to use on a row function. Um, request. I thought response. And, uh, I'm going to, uh, right. Responds don't send file. Um, Now I'm going to use Pat. Join on your name. Remember that the your name contains the path to the root folder. Now I'm going. I'm going to die being at east slash, um index index dot HD email I'm going to save now. In this case, I'm going to explain what it means. Well, with when you typing a route handler like this, it means that if the user opens the browser on visits, look at local host. Then when the user visits local host in the browser in the web browser, then the index dot html file will be sent back as a response. Well, now I'm going toe configure the port where three surgeries going toe get requesters In this case, report will be uh, 3000. And that thought is stored in the port Const. As I'm going to use another Arrgh function to display on my such in the console. So I think being called council. Look on listening. Listening at a local coast 3000. Now, as you can see, I've just, um, creative my server file. Well, they find that configures my server. 3. Understand how React and Webpack work together: Well, you can see thesis, ever dot Js file is using express so we know that you can express I have been style express So I'm going toe typing No puckish man a year in style. Double dash safe express hit. Enter on. Um, express will be, uh, will be in style in the root for their off my off my project. Now, as you can see, expresses being in style in the root folder of my project. The's process takes a while, so I'm gonna skip this part off the process. Now you can see expresses already installed in my project. Now I have to install another dependencies. So I have to write a note. Puckish man a year style, uh, safe react. You send a lot of the pregnancy that I eat, I heat enter now, react is being installed in the project. Now, as you can see react the very active pregnancy since still in the root folder. Now I have to instead a dependency. So I think bean no package manager in styles save andi React dash, dome hit, Enter on. The pregnancy will be installed in the root folder. Now react, um is being installed in the folder React, um, Isa dependency that is going to rent. There were react components to the browser to the web browser. In other words, react, um is going toe insert our our components inside the h T html code. Now, as you can see, react, Don't miss. Already installed. I have to start over dependency. So it I mean, like, jasmine manner your stuff double that shave is slash dash. Uh, if on, uh, have to sell with back I heat enter. Now you can see the Westpac dependencies being in style in the roof folder of my project. This process takes some time, so I'm going to keep this part of the process. Now you can see with back is already in style in the In my project I have installed on our dependency, So I have toe penal package Manager installed, uh, safe. This, uh, with back with back dash Seelye, I hit Enter. Now you can see with box your lawyers being in style in the root folder of my project. Now, as you can see with packs, Eli is already in style in my web in my root folder. If the father of my project. Now, if I go to the back as Jason file, you can see that the least off dependencies appears in the PAC association file. Now, the next the next x X step is to create a fold on your folder. So I'm going to create a new folder on before their name will be source on. I'm going to create a new file on the name off these file will be, uh, with back dot going fee gone fief Thought Jay. Yes. This is the file that contains the the configuration for With Back Now I am inside they with with back conflict dot Js file and I'm going to create to require the bat Um, the but, uh, dependency. So I have toe being the choir. Quite. But Andi, I'm going to create a mobile exports module exports module exports on this object is going toe is gonna come is going to contain the configuration for West back. Ah, the first entry will be entry on this entry field is going to go. It's gonna is going to contain these entry object contains the name off the files off the JavaScript files that will be converted or transform in tow. Jack's Creek. Give a script. Ah, Will. These entry says that my application, uh, is going to use a file that is stored in the source folder on the name off. That file will be hello dot On you have a script? Yes, X or gen x JavaScript extension. As you can see, I don't have that file, so I have to create it to create that file. I go to the source for their on dry toe. I on create the file. Now, um, I got the name of the file will be Hello, Don't GS eggs or JavaScript extension. Andi, this this file is gonna is gonna contain the react up growth. Now, inside. Inside these this file hello dot Js x. I'm going to type in import react import Brianna from, uh react, Andi, I'm going toe in court. React. Don't react. Um, from, uh, react that she don't. But you can see these libraries are the libraries or the dependencies that I just installed . Now I have to take to create a component so they e type in the name of the component. My component extends Ah, react dot Born in. I'm going to create a render metals this middle is gonna display on the component to the browser. So, uh, I hear I'm going toe type the HTML code that I want these component to display to the browser. In this case, the HTML code will be a heather one. That that's a skill. Oh, from react and in orderto. Now, in order to rain that this component toe the browser I have to use react dumb. Don't render on the name of the coffee component in this case, my components, my component. And I'm gonna, uh, typing, um, the the element that way contain these small applications. So I be documented. Don't get element by ivy on the I V will be rude. This is the HTML element where my application will be displayed. 4. Setting up Babel which translates React code into Javascript: now I have toe goto my with back that conflict file on going tohave another entry toe My object. In this case, the entry is out. Food on this entry is going toe configure the the location where the resulting javascript file will be a store. In this case, the location will be well, I'm gonna type in the fight name If I name will be, uh, these things feel describes the name off the file off the resulting javascript file in this case will be, um, bundle that funded? Yes, on the's path where the resulting JavaScript files will be a store. He's, uh that does resolved veered. Aim. Um, beast. Okay, I'm gonna try to explain one of what I'm doing here. When with Burke East run. Um, with back is gonna take the file. Hello dot Gs eggs on. He's gonna convert the file in tow. JavaScript file on such javascript file will be a store in the least folder. In other words, worth back is gonna take three. React, Koth. That is a start in the hello hello file. And he's gonna translate the react react, Koth in tow. JavaScript file on such file will be a store in the East folder before I can continue, I have to install another set off dependencies. In this case, I'm going to style no puckish man a year safe. This, uh, core. This is the first dependency that I need in order to continue. Now, as you can see that the core is being in style in the root for their off my project. Now you can see by well, core has been in style in their root folder off my project. No, I have to install another dependency. So I think being no pocket money here in style, safe diff. Um, and Bob Bail Seelye. I hit. Enter. Now you can see when see allies being in style in the root for that of my project. Now you can see what else you lie Has been installing the root folder of my project on. Now I have to install another dependency. So typing No, Because manager in stuff safe uh, by bid poorly field I heat Enter. Now you can see why. Well, poorly feel is being installed in the father of my project. No, I have to his talent or another dependency. So I think being no pocket money here. Instead, he's the SE safe there. Um, but save Dave by Bill. Or is it? And I heat enter. Now you can see the rebel percent is being in style in the roof or that of my project before I continue. Have to say that Bab El is the translator. Burial is a sentence later that is going toe take the react coat on and is gonna translate the react growth into JavaScript growth. Now you can see the bubble process has been installed in my root folder and I have freestyle another dependency. So it's like bean, not package Manager. Instead save, uh bob slash press it react. I hit. Enter. Now you can see the Bible percent is being in style in the root folder of my project. Remember that Bible is a translator. Babil translates the react growth into JavaScript growth and such JavaScript code can be understood by the Web browsers. I have to repeat. This is very important. Babble is a translator. Burrell translates the react Koth into JavaScript. Koth. Now you can see the 11% has been installed, and finally we need another dependency. No puckish man a year in style safe there and by build No. There I heat Enter. Now you know what you can see. The bubble loader has bean in style in the root father of the application. The loader is on a small dependency that is used by with back after the low. There has bean style. I have to go to my web back conflict on. I'm going to add module more do, um, more Jewell. Bruce, what do you do? More doing rules. And here I'm going toe typing the following before the win. Our rules, uh, eat estates that ive with back finds. Ah, fire with the JavaScript extension or they JavaScript extension. If if with back finds a file with the JavaScript extension, then with back is going to use, uh, the bubble odor. You know, older before I Before I continue, I have to have another entry. So I think being both and the most will be, uh, um, production the most will be production before I continue. I just want express or explain what happens here. Hello. The hello File the hello dot Js x file contains react growth. Such growth will be translated into into JavaScript growth in order for that, that translation toe happen. We need Burrell Babble is a translator. I will is a translator. That translates react growth into JavaScript growth that can be understood by old baldy with browsers. So I repeat my belly. Saturn's later that translates react, react both in tow. JavaScript growth that can be understood by hold the with browsers. Now I'm going to prove my my regular expression like this. I'm safe. The changes 5. Using Babel to translate React App into Cross-Browser Javascript: Now I have to go to the to the comment prompt. And I have toe run. I have to go to the common prompt and I have to run with back. So you can see I am in the common prompt right now on, uh, I 13 No package, man a year. No MPX with back. This is the thesis is gonna run with back and with back is gonna read my configuration file now with back says that I have an unexpected token. So I have to correct that mistake thesis, the talking, the humanist, unexpected talking. So I removed. Be talking on save the changes. Now I go to the comment prompt on again drawn, uh, with buck on with back is going to read my configuration file now with back says that I have a mistake on in order to correct thes mistake because with pack is not able to understand, um, my react growth in order to correct toe fix this mistake, I have to go toe my project on. I'm gonna create a new file. The file name will be, uh does R c on. I'm going to save this file in the root folder. on this file will contain an object. Uh, the the object thief. First entry for this object will be presents on these entry will contain on a right. The first element off this awry will be Bill his lash, uh, press it precip. And on the other entry for these presidents presidents entry where the other value The other item off these are I would be above in Chris it react, but it percent for yet Now I said the changes on I go to the the command prompt again. And, um, I have toe run with back Now you can see barrel translated My react goeth into JavaScript growth. Andi, if I go to the my route fault there, I can see that my distribution folder contains, um contains the JavaScript growth. In other words, the the Hilo file that contains my react gold. What? Waas transform in tow The app, the bundled, the judges file that contains only javascript growth. In other words, react react code was translated into JavaScript growth. Now I have to go to the command prompt and I'm going toe start the server. So I think he knows server those j yes. In this moment. The server is starting now. As you can see, the server has just started on. I go to the browser and I have to take being, Uh well, let's go to them toe the my route further on that you can see Thea up that bundle dot Js file contains the JavaScript code. So I have to typing. Look and post. Now I am in the browser. I may have to type in, uh, local coast. Now, I am in the browser on I think being a local host 3000 it slash uh up dot bundled the genius I heat Enter. Now, as you can see, the react growth worst translated into JavaScript growth on these JavaScript growth is unified as well. 6. Minify React code using Webpack and Babel: Okay, now, the next step is to create on html file Andi to be able to attach the JavaScript growth inside on html file in orderto toe handle HTML files, we need toe installed, another dependency. So I'm going to I'm going to a stop the server, and I helped instead. Another dependency. These dependency is, uh, he said it pendency called HD email with back blue. Let's say don't let it install thes thes blogging in the root folder off our project. Now, as you can see, the HTML with back plugging is being in style in the root folder off our application. Um, the propose the purpose off these plugging east toe attach the JavaScript growth in tow on html file so that the HTML file can be sent back. So the browser as a response Now you can see the HD email with path with back looking has been installed in the project. Now I have to go toe my configuration file, and I'm gonna includes the plug in by typing in const Uh, with back each HD email with back okay equals require ah HD a real with back with back blogging. Once theblaze meanies required in my configuration file. I have to set up these things blogging. So I have toe have a new entry toe. These my configuration object. The entries is blue jeans. Andi, uh, inside these. Ah, sorry. King. Say these Visa Ray, I have to include Panyu instance off html with back looking Andi, I'm going to pass some attributes. Some some information to this playing the first field will be a template and then played equals template. The template for my html for my html file will be Will be placed in the source on directory on will be named, uh, hello dot html. Now, um, my filing will be index. I don't html Well, I have to try to explain. I want to explain what happens here. What happens here is that the file hilo dot html will be, um, will be will be attach the JavaScript growth. Andi the script growth alone with the hello. Those HD email file will become the the index though dot html file. In other words, the index dot html file is the file that will be sent back to the browser. Well, now I need to go to the source directory and create a hello dot html file. So I go to the source directory, and, uh, I saved this fire. I have to save this file scale, oh dot Html. This will be my template for my html growth. So I say this file as Hello fellow, both html I heat safe now. I have to create the markup for these files on the title for the title for this file will be welcome to react. Welcome to react. These thes template will contain a thief element, Andi. The element will contain on ivy equals toe that is equal to route. It is important to recall that our react application will be displayed inside thesis root element. Before I continue, I just have to say that my javascript code will be attached to these html file on the's HTML file will be sent to the least folder. In order to do that, I have toe Goto the common prompt and 19 in P X with back Now, the console says that I have and I have a new NISP unexpected identify year. So I have to go toe my configuration file and I'm gonna fix some problems. In this case, I have to place a common. I say the changes I come back to the common prompt on Repeat the process MPX with back now . As you can see, everything is okay. So I'm gonna restart the server. I think he knows servers. Dog? Yes, I hit. Enter now, as you can see, the service east. Um, he's started on. I go to the browser in the browser. I have to like being a local post 3000. Remember that? That 3000 is the port I heat enter. And as you can see, the HTML file has been sent back as a response from the server. Now, if I analyze the HTML code, uh, we will see that the JavaScript code has bean attach to these html file. Let's analyze the the HTML code off these files and that you can see the ate the JavaScript gold has bean attached. Police html file. Here. You here. You can see that it's a source up the bundle. Dodger. Yes. If I click over these link, we can see that the JavaScript growth appears so. In other words, I were html. Growth contains JavaScript growth as well 7. Attach Javascript file into HTML using Webpack: Okay, now, the next step is to create on html file Andi to be able to attach the JavaScript growth inside on html file in orderto toe handle HTML files, we need toe installed, another dependency. So I'm going to I'm going to a stop the server, and I helped instead. Another dependency. These dependency is, uh, he said it pendency called HD email with back blue. Let's say don't let it install thes thes blogging in the root folder off our project. Now, as you can see, the HTML with back plugging is being in style in the root folder off our application. Um, the propose the purpose off these plugging east toe attach the JavaScript growth in tow on html file so that the HTML file can be sent back. So the browser as a response Now you can see the HD email with path with back looking has been installed in the project. Now I have to go toe my configuration file, and I'm gonna includes the plug in by typing in const Uh, with back each HD email with back okay equals require ah HD a real with back with back blogging. Once theblaze meanies required in my configuration file. I have to set up these things blogging. So I have toe have a new entry toe. These my configuration object. The entries is blue jeans. Andi, uh, inside these. Ah, sorry. King. Say these Visa Ray, I have to include Panyu instance off html with back looking Andi, I'm going to pass some attributes. Some some information to this playing the first field will be a template and then played equals template. The template for my html for my html file will be Will be placed in the source on directory on will be named, uh, hello dot html. Now, um, my filing will be index. I don't html Well, I have to try to explain. I want to explain what happens here. What happens here is that the file hilo dot html will be, um, will be will be attach the JavaScript growth. Andi the script growth alone with the hello. Those HD email file will become the the index though dot html file. In other words, the index dot html file is the file that will be sent back to the browser. Well, now I need to go to the source directory and create a hello dot html file. So I go to the source directory, and, uh, I saved this fire. I have to save this file scale, oh dot Html. This will be my template for my html growth. So I say this file as Hello fellow, both html I heat safe now. I have to create the markup for these files on the title for the title for this file will be welcome to react. Welcome to react. These thes template will contain a thief element, Andi. The element will contain on ivy equals toe that is equal to route. It is important to recall that our react application will be displayed inside thesis root element. Before I continue, I just have to say that my javascript code will be attached to these html file on the's HTML file will be sent to the least folder. In order to do that, I have toe Goto the common prompt and 19 in P X with back Now, the console says that I have and I have a new NISP unexpected identify year. So I have to go toe my configuration file and I'm gonna fix some problems. In this case, I have to place a common. I say the changes I come back to the common prompt on Repeat the process MPX with back now . As you can see, everything is okay. So I'm gonna restart the server. I think he knows servers. Dog? Yes, I hit. Enter now, as you can see, the service east. Um, he's started on. I go to the browser in the browser. I have to like being a local post 3000. Remember that? That 3000 is the port I heat enter. And as you can see, the HTML file has been sent back as a response from the server. Now, if I analyze the HTML code, uh, we will see that the JavaScript code has bean attach to these html file. Let's analyze the the HTML code off these files and that you can see the ate the JavaScript gold has bean attached. Police html file. Here. You here. You can see that it's a source up the bundle. Dodger. Yes. If I click over these link, we can see that the JavaScript growth appears so. In other words, I were html. Growth contains JavaScript growth as well 8. Handle CSS styles with Webpack: now the the next step is toe have some styles toe my html growth in order to what styles toe my HTML code I have to use, um I have to install two loaders I saw You have to go to a common front. I'm gonna It stopped the server, and I'm gonna being no puckish man. A year in style. Uh, safe did style lo there on See essays. Lo There I hit. Enter Now you can see Theo loaders have bean in style in my in my in my project Now I hit I hit over to my project and I'm going toe open my back as Jason file Unless you can see, um, the loaders appear appear here style odor on CSS loader. Okay, the next step is to configure these loaders, so I have to have a new rule, my configuration, in order to have a new rule, I have to type in this followed by, uh, realer expression. In this case, the real expression will be about CIA Says on what? These are regular expressions. Say Saiz. Who says or what this regular expression means is that when with back finds, um, CSS file with back will use the style loader as well as this CSF's loader. See, Assists Loader. Uh, the the idea here is that if with back if with back finds a CS is filed with back is going toe extract, the styles on is going toe based those styles inside the HTML Koth by using javascript. Okay, now what? I have to go east to create a CSS file in There's in the source folder. So, uh, the name off these seas off this year says fire will be my style's my values. My style's thought CSS I heat safe and now I'm going to create some styles inside the cystitis shoot. In this case, my styles will be very simple. I am just gonna change the color off the off the front to blue on the phone Family will be Verdana Andi. I'm going to add just the defund different size to 1.3 on, uh, receipt. This is these are all the oldest tiles that I need on. I'm gonna say pieces styles. Now, the next step is that I'm going to open my hello dot jus x file where my react growth east on. I'm going to import the styles, So I I fighting import. Uh, my styles don't see essays. Andi, save the changes Now. Now I have to go to the comment prompt on. I'm gonna run with back. So I take being MPX with back. I hit Enter. Now, As you can see, the command prompt this place that everything is OK. So I I'm I'm goingto restart the server, so I think he knows Surber The J Yes, I hit. Enter now everything. Everything. Everything is okay. So I have to go to the browser on. I just have to refresh these, uh, these with pace after after refreshing these with pace, you can see that the color off the front has changed toe color blue, which means the styles were applied toe my my html file. 9. Adding images by using Webpack: Now, the next step is to have some pictures or some images to my my project. Eso I'm going toe use a picture. In this case, Um, this will be very, very simple. I just have toe copy paste this house picture. So I will. I'm gonna copy paste this this picture and I'm going toe to save these This picture inside my react up one directory. As you can see, this is my my application directory. I opened the source file and inside the source file, I'm going toe May toe based the image or the picture off the house on this picture will be used in my in my html growth before I continue. I have to go to a comment prompt. Andi, I have to stop the server. I have to stop now. I have to install two loaders, so I take being no package manager instead. Uh, safe Dave html low there on file Lo There I heat enter Now you can see the loaders are being in style in the root folder of my project. Now you can see the loaders are are already in style In my root folder off my broke in the godfather of my project. Now I have toe go to the So the growth A writer on I'm going to make some improvements to my configuration file. Ah, the first improvement will be toe a new rule. In this case, the rule says this ik was, um backslash Don't, um And I'm going to placed some formats for pictures, So, uh, B and G the PNG I'm sorry, g uh, you be okay. Okay. Thes thesis is used to loath pictures, and in this case, I'm going toe to use the defy loader file. No, there. Finally, I have toe to use another loader. The's loader will be used for the html documents. So I have to create another rule. Have to create another rule for for HTML documents. So I think being test Andi, I'm going to create a regular expression that says that whenever an HTML file is found, uh, we with back he's going to use the html html loader. So I think being juiced HD and men no, there. And this is it. My my rules are gonna be on. Uh, I just have to remember you guys that my big sure, Or maybe the match he's safe. He saved in the source folder, as you can see, because they much that I'm going to display in my html file now, uh, way. I need to do what I need to perform. One more step. I need to go toe my my html file inside a source folder and I have to add an image. In this case, the source attribute will be equal toe cows to the house dot g e j. I don't know how to say this, but the the idea is that you have to add any much tack blinking toe the image or the picture that went to display in the brother. Okay, Now, the next step is to open the comment prompt, and I have to run with back so that with bag gun. Uh, you can read my configuration file. Now, As you can see, everything seems toe be fine. Everything seems to work. I'm gonna hit over to my district to may my coat it later on in the distribution folder, we can see that the image is already placed in the distribution folder on the index dot html a file contains I'm image that that east pointing to the picture off the house. Now, if I go to the common Prompt and start the server? No, sir. Where does Yes, I hit? Enter. Okay. Everything appears to work. Fine. So I'm gonna refresh the the browser and see what happens now. As you can see, the beautiful house appears in the HTML Koth, alongside the words hello from react. 10. Last improvements to the Webpack configuration file: Okay, you guys, um we're about to finish. We're about to finish, but I need the worth one more important blooming to my to my project that plugging will be clean with back blooming. So I have to install it. First I typing No package manager in style Safe there green with back gluing hit Enter now , as you can see clean with back looking is being installed in the fruitful Therefore, my application Well, guys, as you can see clean with back Blue Universal Ready bean in style in the in the root folder of my project. Now I have to go to the configuration file on I have toe asked, uh but this blogging to my configuration file So I mean ah, clean whiffed back looking equals require clean with back blogging. Now, in order to use this blogging, I have to go to the blogging section and I'm going toe create a new instance off these blowing So I type in new clean with back blowing. I'm probably you're wondering what is the idea behind Cling with back plugging when Well, the idea off with off clean with back plugging is that this blogging is going toe clean the contents off the distribution file and is going to refresh the contents of the distribution . Vile. Each time the with back they were each Each time with back is run from the comment Prompt. Have repeat clean with pack plugging is going to refresh on clean the condense off the distribution file of every solution folder each time, um, with back is run from the comments prompt. Now I have to go to the common problems going prompt. And I have to run, uh, with back to check if everything is okay to check whether everything is okay or not. Now, as you can see, everything is working is working. Well, everything is working because, uh, every comment from displaced this message. Now, I need to go to my configuration file on I have to. As, um, I knew I have toe to improve my configuration by a little bit. So I have to type being chunks ik waas in visa, right? I have toe toe typing the name off the JavaScript files that will be attached to these aids toe the html file again, chunks will be used toe, toe, express toe indicate the JavaScript files that will be attached to the HTML file. In this case, they get the script file that will be attached to the HTML file will be up. So, um, the other street filed The name of the street file is up on going toe. Typing is a visa right up as well to indicate that such JavaScript file must be attached inside. Thes html file. I say the changes. Now I have to go to the command prompt again one more time and I have to run. Went back to check whether everything is working fine or not. Well, guys A. So you can see everything is working fine. Andi, If I go to the common front, toe the browser Sorry, I refresh the application refreshed the web, the Web page. And as you can see, nothing this place because I have toe run the server first. So I go back to the common prompt and I mean nose Surber. Bill Jay is to start the server. As you can see, the server has already started. Now I go to the browser. I'll refresh the be with base to check whether everything is working fine or not on as you can see, everything is working fine. Everything is working Fine. Well, before before, Before I finish, I use when I stopped the server on I want to display to you diversion off. No Js that I'm using right now. So before before I finish guys before I finish Guys, I have to say that the version that I'm using the note jail yes version that I'm using right now is no Js version 8.16 point zero. I'm using a 32 bytes computer. Okay, so check Make sure that you guys use the same version off. No jail. Yes. Diversion of no Yes is 8.16 point zero. Well, guys, I hope you have enjoyed this tutorial and see you later. Bye bye.