diff --git a/public/docs/ts/latest/guide/webpack.jade b/public/docs/ts/latest/guide/webpack.jade
index 9645d803e0..2d74e80f93 100644
--- a/public/docs/ts/latest/guide/webpack.jade
+++ b/public/docs/ts/latest/guide/webpack.jade
@@ -7,31 +7,37 @@ style.
:marked
[**Webpack**](https://webpack.github.io/) is a popular module bundler,
- a tool for bundling application source code in convenient _chunks_
+ 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 used elsewhere in the documentation.
This guide offers a taste of Webpack and explains how to use it with Angular applications.
-
+
- ## Table of contents
-
- [What is Webpack?](#what-is-webpack)
-
+ # Contents
+
+ * [What is Webpack?](#what-is-webpack)
* [Entries and outputs](#entries-outputs)
+ * [Multiple bundles](#multiple-bundles)
* [Loaders](#loaders)
* [Plugins](#plugins)
-
- [Configuring Webpack](#configure-webpack)
-
+ * [Configuring Webpack](#configure-webpack)
+ * [Polyfills](#polyfills)
* [Common configuration](#common-configuration)
+ * [Inside `webpack.common.js`](#inside-webpack-commonjs)
+ - [entry](#common-entries)
+ - [resolve extension-less imports](#common-resolves)
+ - [`module.rules`](#common-rules)
+ - [Plugins](#plugins)
+ - [`CommonsChunkPlugin`](#commons-chunk-plugin)
+ - [`HtmlWebpackPlugin`](#html-webpack-plugin)
+ * [Environment specific configuration](#environment-configuration)
* [Development configuration](#development-configuration)
* [Production configuration](#production-configuration)
* [Test configuration](#test-configuration)
-
- [Trying it out](#try)
-
- [Conclusions](#conclusions)
+ * [Trying it out](#try)
+ * [Highlights](#highlights)
+ * [Conclusion](#conclusion)
You can also download the final result.
@@ -39,39 +45,39 @@ style.
:marked
## What is Webpack?
-
- Webpack is a powerful module bundler.
- A _bundle_ is a JavaScript file that incorporate _assets_ that *belong* together and
+
+ Webpack is a powerful module bundler.
+ A _bundle_ is a JavaScript file that incorporates _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 plugins and rules, Webpack can preprocess and minify different non-JavaScript files such as TypeScript, SASS, and LESS files.
+ Webpack roams over your application source code,
+ looking for `import` statements, building a dependency graph, and emitting one or more _bundles_.
+ With plugins and rules, Webpack can preprocess and minify different non-JavaScript files such as TypeScript, SASS, and LESS files.
You determine what Webpack does and how it does it with a JavaScript configuration file, `webpack.config.js`.
-
+
a(id="entries-outputs")
.l-main-section
:marked
### Entries and outputs
-
- You supply Webpack with one or more *entry* files and let it find and incorporate the dependencies that radiate from those entries.
+
+ You supply Webpack with one or more *entry* files and let it find and incorporate the dependencies that radiate from those entries.
The one entry point file in this example is the application's root file, `src/main.ts`:
-
+
+makeExample('webpack/ts/config/webpack.common.js', 'one-entry', 'webpack.config.js (single entry)')(format=".")
-
+
:marked
Webpack inspects that file and traverses its `import` dependencies recursively.
-
+
+makeExample('webpack/ts/src/app/app.component.ts', 'component', 'src/main.ts')(format=".")
:marked
- It sees that you're importing *@angular/core* so it adds that to its dependency list for (potential) inclusion in the bundle.
- It opens the *@angular/core* file and follows _its_ network of `import` statements until it has built the complete dependency graph from `main.ts` down.
-
+ It sees that you're importing `@angular/core` so it adds that to its dependency list for potential inclusion in the bundle.
+ It opens the `@angular/core` file and follows _its_ network of `import` statements until it has built the complete dependency graph from `main.ts` down.
+
Then it **outputs** these files to the `app.js` _bundle file_ designated in configuration:
-
+
.code-example
code-example(name="webpack.config.js (single output)" language="javascript").
output: {
@@ -79,13 +85,15 @@ a(id="entries-outputs")
}
:marked
- This `app.js` output bundle is a single JavaScript file that contains the application source and its dependencies.
- You'll load it later with a `