Previous Lecture Complete and continue  

  Introduction

Topics Covered

  • Review of how we manage 3rd party packages in the browser
  • Bundle our app using webpack CLI
  • Review the bundled file
  • Change the directory output location in the CLI

Overview

  • Review of how we manage 3rd party packages in the browser
    Normally we include our 3rd party packages via CDN
  • Bundle our app using webpack CLI
    Webpack allows us to combine all of our packages and application code into one file. Starting from our entry file provided webpack is able to read all of its dependencies to combine them all into one file.
  • Review the bundled file
    The app.bundle.js bundled file is not meant to be readable by humans as it is meant for the computer.
  • Change the directory output location in the CLI
    We normally output our build to a dist/ folder

Example Code

webpack app.js app.bundle.js
	

3 comments
xgqfrms
where is the video???
Olivier Borderies
I know this remark is mildly relevant but the Angular.io official doc uses systemjs as their chosen loader, not webpack. Sure they insist this is a choice not a preference. But that could be reason enough to beef up this course (very good and efficient in all other respects) with systemjs and the official package.json config. What do you think ?
Tair Sabyrgaliyev
+1
At least, would be good for a total noob like me to at least know the pros and cons of webpack/systemjs from architectural point of view