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 `