So back in our project if you want to use web packed air I will first of all quit my compilation and
that current development server and instead make sure we can use Web pick their noses.
Does is already a file of the packaged dot Jason File.
We can use NPM to install more dependencies into this project so simply more third party libraries we
need in this project.
And here I don't mean third party libraries which provide us certain functionalities we use in our code
but instead third party libraries that help us set up a project workflow and configuration that makes
development very efficient for us.
We do this with npm install dash dash safe dash death to indicate that it's development only dependency
and then Westpac Westpac dash Seelye Westpac dash def dash server TypeScript and T as loader.
So that's a bunch of packages and I will say what they do in a second.
So let's first of all hit enter and make sure these are all now all getting installed into our project
here and there after we'll have a look at each package and see why we installed it.
So let's wait for this to finish.
So it did finish installing for me here and now with that let's analyze what we installed in package
store.
Jason the new def dependencies section or it already existed but now we have a lot of new packages there
I should say.
These packages were added.
Now what do all these packages do.
Let's start with Westpac where Peg is the tool I just talked about.
It's the heart of this entire setup we're now going to create it is a tool that allows us to plug in
certain functionalities to bomb lower code and also to transform our code and that transform our code
part is important.
We're having a typescript project here right now of course we could certainly use weapon to then bundle
together all the javascript output but it would be even nicer if webpage would do both transform our
types could code to JavaScript and then actually emit a bundled JavaScript file and webpage is able
to do that thankfully we need to WebEx seal I to run webpage commands in our project and the webpage
def server to have debt built in development server which starts Westpac under the hood which watches
our files for changes automatically triggers webpage to recompile when something changes and which then
also serves our page and then we got to typescript into types could lower the T S loader here.
Now we already installed typescript globally on our machine which is why we are able to run TSC dash
w now it is a good practice to also install a copy of typescript per project so that for this project
you get a specific typescript where's the advantages that if you ever change your global ties with working
you don't break your project whereas in your project setup if there were breaking changes in typescript
itself.
So we can lock in a specific word of typescript for a project.
That's why we install it separately here and the T as loader now is a package which will work together
with Westpac.
The T is loader is a package that tells where peg how to convert type code to JavaScript so did webpage
is able to do both compile our code with the help of types of loader which in turn of course uses the
types of compiler under the hood and then we pick all those able to bundle our emitted JavaScript files
into a bundle J.S. file into one bundled code file well and with that let us simply get started and
let's set up a webpage project so that we can use webpage for all these nice things.