Webpack is a popular module bundler, a tool for bundling application source code in convenient chunks and for loading that code from a server into a browser.

It’s an excellent alternative to the SystemJS approach we use throughout the documentation. In this guide we get a taste of Webpack and how to use it with Angular 2 applications.

Table of contents

Development configuration

Production configuration

What is Webpack?

Webpack is a powerful module bundler. A bundle is a JavaScript file that incorporate assets that belong together and should be served to the client in a response to a single file request. A bundle can include JavaScript, CSS styles, HTML, and almost any other kind of file.

Webpack roams over your application source code, looking for import statements, building a dependency graph, and emitting one (or more) bundles . With plugin "loaders" Webpack can preprocess and minify different non-JavaScript files such as TypeScript, SASS, and LESS files.

We determine what Webpack does and how it does it with a JavaScript configuration file, webpack.config.js .

Entries and outputs

We feed Webpack with one or more entry files and let it find and incorporate the dependencies that radiate from those entries. In this example, we start from the application’s root file, src/app.ts :

webpack.config.js (single entry)

entry: { app: ‘src/app.ts’ }

Webpack inspects that file and traverses its import dependencies recursively.

Here it sees that we’re importing @angular/core so it adds that to its dependency list for (potential) inclusion in the bundle. It opens @angular/core and follows its network of import statements until it has build the complete dependency graph from app.ts down.

Then it outputs these files to the app.jsbundle file designated in configuration:

webpack.config.js (single output)

output: { filename: ‘app.js’ }

This app.js output bundle is a single JavaScript file that contains our application source and its dependencies. We’ll load it later with a <script> tag in our index.html.

Loaders

Webpack can bundle any kind of file: JavaScript, TypeScript, CSS, SASS, LESS, images, html, fonts, whatever. Webpack itself doesn’t know what to do with a non-JavaScript file. We teach it to process such files into JavaScript with loaders . Here we configure loaders for TypeScript and CSS:

… it applies the test RegEx patterns. When a pattern matches the filename, Webpack processes the file with the associated loader.

The first import file matches the .ts pattern so Webpack processes it with the ts (TypeScript) loader. The imported file doesn’t match the second pattern so its loader is ignored.

The second import matches the second .css pattern for which we have two loaders chained by the (!) character. Webpack applies chained loaders right to left so it applies the css loader first (to flatten CSS @import and url(...) statements) and then the style loader (to append the css inside <style> elements on the page).

Plugins

Webpack has a build pipeline with well-defined phases. We tap into that pipeline with plugins such as the uglify minification plugin:

plugins: [ new webpack.optimize.UglifyJsPlugin() ]

Configure Webpack

After that brief orientation, we are ready to build our own Webpack configuration for Angular 2 apps.

Open a terminal/console window and install the npm packages with npm install .

Common Configuration

We will define separate configurations for development, production, and test environments. All three have some configuration in common. We’ll gather that common configuration in a separate file called webpack.common.js .

Let’s see the entire file and then walk through it a section at a time: