Entry point and output

JavaScript and other files imported into each other are closely interwoven. Webpack creates a graph of all such dependencies. The starting point of this graph is called entry point. An entry point tells Webpack where to start to resolve all dependencies and creates a bundle. Entry points are created in the Webpack configuration file using the entry property. In the seed project on GitHub, we have two configuration files, one for the development mode (webpack.dev.js) and one for the production (webpack.prod.js) mode, each with two entry points.

In the development mode, we use the main entry point for JIT compilation. The main.jit.ts file contains quite normally bootstrapping code. The second entry point combines files from core-js (Polyfills for modern ECMAScript features) and zone.js (the basis for Angular's change detection):

entry: {
  'main': './main.jit.ts',
  'polyfill': './polyfill.ts'
}

In the production mode, we use the main entry point for AOT compilation. JIT and AOT were mentioned in the Angular modularity and lifecycle hooks section:

entry: {
  'main': './main.aot.ts',
  'polyfill': './polyfill.ts'
}

The output property tells Webpack where to bundle your application. You can use placeholders such as [name] and [chunkhash] to define what the names of output files look like. The [name] placeholder will be replaced by the name defined in the entry property. The [chunkhash] placeholder will be replaced by the hash of the file content at project build time. The chunkFilename option determines the names of on-demand (lazy) loaded chunks--files loaded by System.import(). In the development mode, we don't use [chunkhash] because of performance issues during hash generation:

output: {
  filename: '[name].js',
  chunkFilename: '[name].js'
}

The [chunkhash] placeholder is used in the production mode to achieve so called long term caching--every file gets cached in the browser and will be automatically invalidated and reloaded when the hash changes:

output: {
  filename: '[name].[chunkhash].js',
  chunkFilename: '[name].[chunkhash].js'
}

A hash in the filename changes every compilation when the file content is changed. That means, files with hashes in names can not be included manually in the HTML file (index.html). HtmlWebpackPlugin (https://github.com/jantimon/html-webpack-plugin) helps us to include generated bundles with <script> or <link> tags in the HTML. The seed project makes use of this plugin.