Using webpack to bundle the app

If it weren't for Sean Larkin, you might have never heard of webpack. His contributions and involvement in the bundler community have helped bring webpack into the Angular CLI and also make it a primary go-to bundler for many things. We greatly appreciate his efforts and kindness in the community.

Preparing to use webpack

Let's take a look at how webpack can be utilized to reduce the packaged size of our NativeScript for Angular app in addition to ensuring that it executes optimally on a user's mobile device.

Let's first install the plugin:

npm install nativescript-dev-webpack --save-dev

This automatically creates a webpack.config.js file (at root of project) preconfigured with a basic setup that will get you reasonably further with most apps. Additionally, it creates a tsconfig.aot.json file (also at root of project) since NativeScript's webpack usage will use Angular's AoT compiler while bundling. It also adds some nifty npm scripts to our package.json to help...