But what if I told you there's a library out there that can do everything that you want wet pack to do, But it only requires you to write one single line of code in today's video.

We're gonna be talking about that library, which is called Parcel.

So let's get started now.

Welcome back to Webb has simplified my name's Kyle.

And if you're new around here, make sure you subscribe to the channel for more videos where I simplify the Web for you.

Now, As you can see, I have the parcel Js home page pulled up, which I'm going to have linked in the description below.

If you want to check it out yourself.

Look at all the documentation, but essentially, if we scroll down here, you can actually see the main things that parcel is going to do for us.

And the first to that it does, is it actually bundles your application for you.

So it's going to take all of your Java script.

Your HTML.

Your CS says S C.

S s any of those different types of files you have.

It's going to bundle them up men if I them and put them into a directory that you can deploy so that you have the most efficient application to deploy to your production environment.

Also, the really big thing that parcel does, which I think is the most important, is it does automatic transforms for you.

So essentially it'll take your S CSS and converted to CSS.

It'll take your modules JavaScript and convert it normal job script.

It'll use babble to trance.

Pile your job a script so you can use brand new features of JavaScript, and it'll transpire all the way down so that older browsers can actually use it.

This is by far the most important thing about parcel, in my opinion.

Also, you can set up code splitting.

If you want to do that, it does hot module replacement, which essentially means that while you're editing your code, it's automatically going to swap that code out in the browser without refreshing it for you.

So you can actually see your changes live without refreshing the page every single time and just some basic error logging.

But essentially the big thing about parcel versus red Pack is all of this is automatic.

You just download parcel, and it does it all for you.

So let me show you how this works.

Inside of an actual application here, I just have a blank application, and what we're gonna do is install Parcel into our application.

And to do that, we first need to run N p m in it so that we can actually get in NPM.

Project started up.

We just hit enter a bunch of times to do all the default values.

There we go.

That's gonna give us a package that Jason file.

And next, if we type in P m i for install, we put Dash Dash save Dev because this is only for development and we just want to type in here parcel bundler.

And when we had entered, this is actually going to download and install parcel for us onto our system so that we can use it.

This might take a little bit of so I'm gonna be back with you when this finishes.

Now that we have parcel installed, you'll actually see that we have it in our development dependencies.

We have parcel bundler.

And to get started with parcel, all we need to do is add some scripts.

So up here, what's credit script?

We're just gonna call it death because this is going to be for a deaf environment.

And what we can do in here is we can just put parcel and then the name of the file we want to actually have is their entry point in our case, we're going to use an index dot html file.

So let's just create that now index dot html We just put exclamation point and enter, and that's actually gonna load up our HTML force.

And every day Oh, next inside of here, we can actually put in our build script This is going to be for won't be deployed to production.

We want to build our application to make it as modified as possible before deployment.

So what this is going to do it is going to be essentially the same thing, or we're just gonna put build in front here, So I'm gonna say, parcel build index dot html and now we can save that.

And we could just run that by saying, npm run Deb, for example and this is going to set up our development environment.

It's going to mean if I everything for us and as you can see here and our distribution folder, we have her index dot html.

Obviously, nothing has changed because it's just our gnome application.

But it does set up a server for us running at local host 1234 And as you can see, if we pull that up, we get our index dot html.

Obviously, this is blink right now, so let's add some things to it.

We could just put this off to the side here and now we want to do is we want to open up our index dot html file and let's put just a header in there.

We'll say each one is going to be header, and if we save that, you'll see that automatically rebuild our distribution full there over here for us.

But it doesn't refresh over here.

We have to actually Manu a refresh, but that's okay.

Now that we have the basics out of the way for how we need to handle our parcels set up, let's actually look at all the benefits we can get with parcel by just jumping into some Java script and some CSS.

And the first thing I want to do is actually create a new folder.

We're gonna call this folder source and we're gonna put our index dot html inside of here.

And we need to change here our path to our index dot html inside of our build script.

So let's make sure that we change that save it come down here which want to cancel out of our current build and run our new Dev server.

So that'll work perfectly fine.

As you can see, it's building.

And if we refresh over here, you see, it's still working just fine.

So next let's create some folders in here.

We're gonna create a folder which is going to be for S CSS.

And we're also gonna create a folder which is gonna be far javascript.

I was just create a main dot s CSS and also a main dot Js.

And normally, if you wanted to use SAS inside of your application, you would need some kind of compiler to compile it down to CSS.

But again, parcells gonna take care of all that force.

So in here it was just set the background color to be read and let's make sure that we do this inside of a selector.

We just can't use body.

For example, this is going to look just like CSS, which is fine.

We saved that.

And we could just import that instead of our JavaScript so we can just come in here and we can say we want to import from that s CSS folder.

We want to get main dot s CSS just like that.

Now we can save that.

Come inside of her index dot html here, and we want to include that script tag.

So we want to set a source.

The source is going to be from javascript main dot Js.

Let's just make sure that we defer this.

So now if we say that you see, it's building everything up, it's going to be building everything, installing everything we need.

And if you refresh over here.

You see, we now have a red background on our object instead of just that plain white background.

And that's because our CSS is getting converted.

Here are assassins getting converted to CSS and coming through this import statement and actually getting imported into our index dot html and we can actually see that by opening up our index html here.

If we make this a little bit whiter, you can see that the first thing it's got is our script tag.

And then it also imports are linked.

Ike, which is our style shoot for us and this is actually coming from in here.

You can see we have our style sheet with our body and this is converted to normal CSS from the S E s s syntax and same thing with our JavaScript down here, it has all the extra personal stuff inside of it.

So now what we can do is also look at how we can do imports.

So it's creating other file inside of here that we could just call this funk dot Js and this is just going to export default, a function and this function all it's going to do is just say, console dot log Hi, never go.

And now, instead of Maine we can do is we can import that so we can say import funk from dot, slash funk just like that.

And we could just call that function So we could just say funk.

We can save that.

And if we inspect this over here, go over to our counsel.

You can see that we get high being printed out.

And if we look up in here, we're seeing that we're only importing that one main Js.

And as you can see already, parcel takes all that manual configuration that you need to do in Web pack, and it just does it automatically for you.

And all you need to do is just run that Dev script in orderto have parcel automatically re compile all of your assets every time you make a change so that you can view them in the web over here and that's it.

It's really a simple is that if you enjoy this video, make sure you check on my other videos, which are linked over here, and subscribe to the channel for more videos where I simplify the web for you.