We prepared our development workflow for Westpac here configuring it for the webpage.
Def server setting the mode to development and setting up source maps to improve our debugging experience
to give us better error messages and so on.
Now for production.
So when we want to prepare our code to upload it to a server where it then will be served to our end
users.
We typically want a different workflow and therefore I'll add a new config file where picked out conflict
up port dot J.S. This name is not up to you because webpage will not look for it by default will tell
it to look for it in a second though before we tell it let's actually copy all the development set up
here over to this conflict a pratfall.
But now let's find unit we can set mode to production for example.
This will tell where pick to do these optimizations modify our code and so on.
He would definitely want to set this here.
We'll leave entry and output we can get rid of the public path because Dad was required for the webpage.
Def server.
Now we will not use it here because for production we want to run the webpage script and generate our
output written to disk and not served temporarily on a locally running server.
We can set def tool to non to not generate any source maps here because in production we might not need
them.
Now the rest can stay as it is but we will add more at the bottom here.
I want to add a plug ins entry and set us to an array.
Plug ins are extra well extensions or well plug ins.
You can add to your webpage workflow which will basically be applied to the entire output to the entire
project.
Rules and modules specifically are applied on a per file level.
Plug ins are applied to the general workflow.
Here I want to add a plug in which automatically deletes everything in the disk folder before a new
output is written there.
So did we always just have the latest most recent output in the this folder for that.
I'll install a brand new package with dash dash save def and that's the clean dash web pack Dash.
Plug in and this will help us clean up the this folder in our case whenever we rebuild our project.
So with that installed let's import it here at the top.
I'll name it clean plug in and imported via require clean dash webpage dash plug in and with it installed
in the plugins array at the bottom.
We just call new clean plug in thought clean webpage plug in and instantiate this does as a constructor
function and now instantiate it.
This is all you need to do here and this will in the end tell where Peck dead before it writes something
to his output folder it will clear everything that is in there.
Now we got the finished production workflow now to use it let's go to package stuff Jason and there
lets a justice build script here.
I want to tell webpage to use this prod filed as production configuration file and we do so by adding
dash dash config and then Westpac DOD conflict port dot J.S. here.
This here should be whichever file name you chose and this instructs webpage to use disk configuration
file instead of the default webpage dot conflict dot choice file it normally looks for with that if
you now run NPM run build it will build your app for production which means it gives you this optimized
output so if you wait here we get the bundled J as file and this is now really optimized code built
for production and this together with your index H Tim l file and apps yes as file is what you would
put onto a server here if you want to deploy your application this is also the end of this module.
Now let me sum up what we learn.