Migrating the minimum viable application to Webpack bundling

It is advantageous for many reasons to make it as easy and quick as possible for the client to load and run the code sent from your server. One of the easiest and most effective ways of doing this is by bundling lots of code into a single file. In nearly all cases, it is highly efficient for the browser to load a single file that contains all the dependencies required to bootstrap an application.

Webpack offers many useful tools and among them is the terrific JS bundler. This recipe demonstrates how you will be able to combine your entire application (including npm package dependencies) into a single JavaScript file that the browser will be served.

Note

The code, links, and a live example of this are available at http://ngcookbook.herokuapp.com/3310/.

Getting ready

You should have completed all the steps given in the Composing configuration files for a minimum viable Angular 2 application and Composing application files for a minimum...