To get started.
Let's first of all go to t is conflict or Jason File fall because there we need to make sure that certain
things are configured.
Make sure that the target here is actually set to ease five or yes six.
That is up to you it depends on which browsers you plan on supporting because in the end web bag and
the type of loader will use this target to determine how your code should be transformed.
Should your times good code be transformed to JavaScript code that runs an older browsers as well or
as with iOS 6 to code that only runs in more recent browsers.
Module then should be set to iOS 2015 or iOS 6.
So that setting is fine.
And in addition you also want to verify your output.
I will keep it to dist but you could change does if you want to compile your code to a different directory.
You don't need to root directory anymore though because webpages will take over there and webpage will
determine where your root files are.
So in general these settings should be fine.
We can always tweak them later if something doesn't work the way we wanted to work with that.
Let's add a new configuration file next to t content and that's the Web packed dot conflict such as
file and make sure you do read your name ID like this because this is a file webpage will automatically
look for it this will in the Intel web peg how to work with our project because webpage is a tool which
needs to be configured to work correctly here.
So what do we do in this webpage dot config file discontinuation consideration file uses javascript
and actually it uses node j as features.
So we want to use the notorious export syntax which looks like this to then export a javascript object
which will be the configuration object picked up by Westpac.
So in case you never saw that before.
This is how you export things in a node Chase environment.
And here we are exporting a javascript object.
Now webpage needs a couple of pieces of information.
Most importantly it needs to know with which file your entire project starts.
So where are your entry point is in our case that's the apt yes file.
This file should be executed first and what webpage.
Then we'll do is it will have a look at the imports in this file and go to these files and have a look
at their imports.
Empty imports of the imported files and so on until it knows all files your project uses in the end
and then it will go through the file contents like this contents here and all the content in all the
files and compiled them with the help of the T as loader package I mentioned.
Now to make webpage work correctly here you should actually now remove all the dot J S extensions in
all the imports.
We needed that before when we used the native browser built in is module functionality but with Westpac
You don't need these extensions because webpage will actually automatically look for dot jazz and certain
other extension files so you don't and you shouldn't add them here.
Otherwise webpage will look for files with a double extension which you don't want to remove.
Doc J.S. on all these imports here and once you did that save all these files to make sure you were
well changes are applied.
Now back to where picked up convict J.S. dear you now should add entry property in this exported object
and point at dot slash source slash app t s.
In our example.
So at the root entry file of your project next.
Add a output key here and output now actually is the object here where we first of all specify the file
name.
This will be the single JavaScript file which will be produced in the end.
And here it will name it bundled J.S. but you could name it whatever you want.
App jazz or whatever.
Well whatever you want you can also add dynamic parts here for example content hash to tell webpage
to automatically create a unique hash for every build which can help you with caching in the browser.
But again you can learn more about that in the webpage docs here.
We don't need that so we'll just name the file bundle.
J.S. in addition to the file name you also need to specify the path where the output should be written
to.
And of course statute matched a path you have in your team's conflict.
J.S. Jason File to avoid errors so that this folder now unlike in a t is conflict Jason File you shouldn't
write dot slash disk here.
Web Peg wants an absolute path here and to build one we can use a no chess module for Dad we can use
to know chess import syntax which uses that require a keyword and import the path module.
You don't need to install this as a library.
This is a core no chess module which you already have.
If you've got no chance installed which you do because we did that earlier in the course now you can
use path to call the resolve method there which allows you to build an absolute path to a certain folder.
For Dad we use a special constant the underscore underscore dir name constant which is available globally
in a node chess environment and webpage.
As I said uses node j asked to execute your files and then as a second argument dist in the end this
just constructs an absolute path to the dist folder which Westpac then uses to write your output there
well and with Dad you've got an entry point and an output point but you don't tell webpage what to do
with your types good files because by default webpage doesn't know that by default it's just a bundler.
Any extra functionality like compiling type 2 JavaScript has to be taught to Westpac we'll do that in
the next lecture.