anchor.diff:  :marked
   :marked
     #### _module.rules_
  -  Rules tell Webpack which loaders to use for each file (AKA _module_):
  -  
  +  Rules tell Webpack which loaders to use for each file, or module:
  +
   +makeExample('webpack/ts/config/webpack.common.js', 'loaders', 'config/webpack.common.js')(format=".")
   
   :marked
  -  * awesome-typescript-loader - a loader to transpile the Typescript code to ES5, guided by the `tsconfig.json` file
  -  * angular2-template-loader - loads angular components' template and styles
  -  * html - for component templates
  -  * images/fonts - Images and fonts are bundled as well.
  -  * css - The pattern matches application-wide styles; the second handles component-scoped styles (the ones specified in a component's `styleUrls` metadata property)
  +  * `awesome-typescript-loader`&mdash;a loader to transpile the Typescript code to ES5, guided by the `tsconfig.json` file.
  +  * `angular2-template-loader`&mdash;loads angular components' template and styles.
  +  * `html-loader`&mdash;for component templates.
  +  * images/fonts&mdash;Images and fonts are bundled as well.
  +  * CSS&mdash;the first pattern matches application-wide styles; the second handles 
  +  component-scoped styles (the ones specified in a component's `styleUrls` metadata property).
   .l-sub-section
     :marked
       The first pattern is for the application-wide styles. It excludes `.css` files within the `src/app` directory
       where the component-scoped styles sit. The `ExtractTextPlugin` (described below) applies the `style` and `css`
       loaders to these files.
  -    
  -    The second pattern filters for component-scoped styles and loads them as strings via the `raw` loader &mdash;
  +
  +    The second pattern filters for component-scoped styles and loads them as strings via the `raw-loader`,
       which is what Angular expects to do with styles specified in a `styleUrls` metadata property.
   
   .l-sub-section
  
positive.code: 
  :marked
    [**Webpack**](https://webpack.github.io/) 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 used elsewhere in the documentation.
    This guide offers a taste of Webpack and explains how to use it with Angular applications.
    
    <a id="top"></a>
    ## Table of contents
    
    [What is Webpack?](#what-is-webpack)
    
      * [Entries and outputs](#entries-outputs)
      * [Loaders](#loaders)
      * [Plugins](#plugins)
      
    [Configuring Webpack](#configure-webpack)
    
      * [Common configuration](#common-configuration)
      * [Development configuration](#development-configuration)
      * [Production configuration](#production-configuration)
      * [Test configuration](#test-configuration)
      
    [Trying it out](#try)
    
    [Conclusions](#conclusions)
  
    You can also <a href="/resources/zips/webpack/webpack.zip">download the final result.</a>
  
  
negative.code: :marked
    ### Loaders
  
    Webpack can bundle any kind of file: JavaScript, TypeScript, CSS, SASS, LESS, images, HTML, fonts, whatever.
    Webpack _itself_ only understands JavaScript files.
    Teach it to transform non-JavaScript file into their JavaScript equivalents with *loaders*.
    Configure loaders for TypeScript and CSS as follows.
  
  .code-example
  