So to tell where Peg what to do with tides good falls we need to add a new entry to the configuration
object here and that's the module property module.
Also takes a javascript object then configure it a module in the end it's just a file.
So here we tell webpage how to work with the files it finds like with the apt yes file and then all
the once it understands that file how to deal with all the inputs in that file.
So how should webpage deal with these files.
Well we tell web page by adding a rules array here because you can set up multiple rules that should
be applied to all the files.
Here we only need one but in more complex projects where you'll also want to use webpage to handle CSR
as files or images or anything like that.
You can add more rules for different types of files.
And as mentioned before the official docs are a great place to learn more about loaders which you Indians
used to teach webpage more about different files and to learn more about web pig in general.
So here we will add such a loader actually a loader is simply a package that tells where pick how to
deal of certain files and of course here we got the T as loader which helps us tell webpage how to deal
with types good files so we add a rule which is just a javascript object where we first of all add a
test property.
This describes a test where peg will perform on any file it finds.
To find out whether this rule here applies to that file or not and the test here is a regular expression
in there.
I want to tell webpage that any file which ends with Dot T S should be used or should be handled by
this rule a regular expression that checks where the file extension can use a backslash year and then
dot t s and then a dollar sign.
This is a regular expression which in the end tells webpage that you want to check for faults that end
with thought t s.
Then you also have to specify what webpage should do with those files and you do that with the use keyword
here and there.
You specified a loader webpage should use in my case T S dash loader.
So we tell webpage that any types could file it fines should be handled by the task of loader which
then in turn knows what to do with such a file.
The T is loader will automatically take the T as conflict chests and fall into account so we don't need
to specify any extra configuration here.
Just one configuration that never hurts.
Exclude node modules as a regular expression so that webpage also doesn't try to look into node modules
with that we need to add one extra configuration here after the module configuration and that's the
resolve key there we tell where peg which file extensions aid adds to the inputs it finds.
I said webpage would add extensions on its own and by default it will look for a dotted J as files.
Now here we want webpage to look for dot t as files and therefore here in resolve we can add extensions
property set does equal to an array and tell webpage that it should look for dot t as follows as well
as Dot J as files.
So now webpage will basically look for such files and then bundle all files that have these extensions
which you are importing together and that's our setup.
Almost finished for the moment our configuration file almost finished for the moment at least with dad
we just should go to t as config as well and there make sure that you set source map to true.
This will help us debug our code and webpage supports this as well.
There we now just also have to add an entry maybe here below output and it's a def tool key and they
are the value should be in line Dash.
Source map as a string this knee and tells where dad there will be generated source maps already which
it should extract and basically wire up correctly to the bundle it generates so that whilst we get such
a bundle we still have a great development experience now with that we can use weapons.
And the question is how do we use it a simple way of using it is to go to the package does Jason fall
in there.
Let's add a script for example build you can give it any name you want here in the scripts section and
there simply run webpage.
So just type of weapon.
Like this that's now all go to the dist folder and in the end remove everything that's in there and
with that save it and now run NPM run build and let's see whether that works and it fails.
The eyes and look at the type of wood that should not be deaf.
Tools.
But Deaf tool.
Here to change this to deaf tool in the configuration file.
And now let's repeat NPM run build
and with Dad you can ignore the warning you get here.
You will see that in the this file you have a bundle J.S. file and what you see in there also already
is quite unreadable code because we have this magnification in action here actually.
So this actually already is this optimized code as well.
Now before we see how we can also work with different configurations here let's actually go to the index
H html file and adjust our imports here and point at bundle J.S. and for the moment since we're not
using backpack death story yet let's run NPM start to bring up that index HMO file again.
And if you now reload this page you'll see this works if we enter something here.
Our project works the way it should and it imports the bundle jazz file here.
So only one file instead of all these individual files and that already is an enhancement.
Here we already have that bundle code which are what's all these unnecessary H.
If you requests and if you go to the sources tab by the way and you want to debug your code you will
find this webpage folder and in there a source folder in there you can go to your type of files and
for example here on project input you can also set a breakpoint here on gather user input.
And if you now press the button it pauses there and you can debug your code and that's the source maps
coming in which really help us developing and which make our life as a developer easier.
We got this optimized code but thanks to the source maps we can debug our original task of code here.
So we already have a pretty amazing setup which gives us a lot of optimizations already.
Now let's finish this and make sure we actually have the webpage depth server included and we then actually
have to workflows one for production and one for development.