Well, we've repeated this several times, we need to somehow intercept us, build when it's trying
to figure out what path something like REACT is at on your local filesystem.
So to take care of all this stuff we've been talking about intercepting e-mails, attempt to figure
out the path and actually loading up the file, we are going to create and build plug in in the lecture
right before this one.
You should have found a text lecture with a little bit of code inside of it.
That is a very quick demonstration plug in that we're going to use to better understand how plugins
work inside of s built.
So let's make use that code right away.
Back inside of our code editor.
We're going to wire up that plug in, make a couple of other quick changes to our project and then start
to see this entire process in action.
All right, so back inside my editor, I'll find the Sarsae directory, I'm going to create a new folder
inside their old plugins and inside that, I'll make a new file called Unpackaged Path.
Again, that's.
Then inside of this file, we're going to paste everything that you just got inside of the last text
lecture, but all that stuff inside there, you should have something that looks like this.
Once you've tasted all that stuff in, we're going to save this, we are going to very quickly come
back to this file into a very deep dive on what's happening inside of here.
But right now, I'm going to close this file and go back over to my index DOT TSX.
Inside of here, we're then going to make a couple of changes specifically around this transform line.
Remember, transform really means trans people in the world of build.
We're going to change this, transform into a build or bundle process instead.
So for that, I'm going to delete the existing line that we've got there and I'm going to replace it
with the result is a wait ref dot current dot build.
The first argument is going to be an object, I'm going to provide a entry points property that's going
to be an array that has a string of indexed JS inside of it.
And we're going to add in just a couple of other properties very quickly.
I'm going to put in a bundle.
True.
Right, false.
And then plug ins.
It's going to be an array and inside that array, I'm going to add in unpackaged have plug in.
And then call it like a function.
This unpackaged path plugin is the thing that we just pasted into that other file, so let's import
that into indexed TSX very quickly up at the very top.
I'm going to add in an import statement for Unpackaged at again.
From Leganes Unpackaged Path plugin.
So back down where we were working just a moment ago, I'm going to very quickly add in a log of results
and see what comes out of the bundling process.
So let's save this, then go back over to our browser.
I'm going to make sure I refresh the page.
We do not have to add in any code to the text area for right now.
The plug in that I just gave you a moment to go has some hard coded code values inside of it so we can
just directly click on Submit and immediately start to see a couple of different console logs appear.
The results of the entire bundling process.
It's the very last console log.
I want to focus on just that line for just a moment.
If I expand that, I'll see a property inside of here called Output Files.
That is an array of objects.
Let's take a look at that and see what's inside there.
Here's the very, very first element inside that array.
You'll notice, unfortunately, there is a contents property inside of here, which presumably is like
the actual contents or the output of whatever we got out of that bundling process.
It looks like it's some array of numbers.
That is some raw data inside there.
And those raw numbers are those numbers represent actual text characters.
You will notice, however, that there's also this text property right here and there's a little dot,
dot, dot right next to it.
If I click on that, it will turn into the actual code that has come out of our bundling process.
And that actually looks pretty good right there.
Let's try printing that up onto the screen and then do kind of a deeper look at what came out of all
this bundling stuff.
So back inside, my editor.
I'm going to find results right here.
I'm going to iron out that log for just a moment and I'm going to update set code to result output files.
We'll take a look at that first object.
And I'm going to take a look at the text property.
I'll then save this, I'm going to flip back to the browser again.
And then click on Submit.
And there's our code that is the output of the bundling process, so you should kind of take this as
kind of vaguely proof that we can get us build bundling and working successfully inside the browser.
But obviously, at this point in time, I give you that plug in that has a lot of mysterious code inside
of it.
In addition, we have not actually done anything with unpackaged we have not attempted to go and fetch
any modules or resolve any parts or anything like that stuff.
Right now with this plug in, I really just want to get you more familiar with plug ins in general,
how they work and show you a little bit more about how this output bundle is being generated.
So let's take a pause right here and start to do a deeper dive on some of these other console logs and
the real output from our bundling process.