anchor.diff:      Load `zone.js` early within `polyfills.ts`, immediately after the other ES6 and metadata shims.
   
   :marked
  -  Because this bundle file will load first, `polyfills.ts` is also a good place to configure the browser environment 
  +  Because this bundle file will load first, `polyfills.ts` is also a good place to configure the browser environment
     for production or development.
   
   a(id="common-configuration")
   .l-main-section
   :marked
  -  ### Common Configuration
  -  
  +  ### Common configuration
  +
     Developers typically have separate configurations for development, production, and test environments.
     All three have a lot of configuration in common.
   
     Gather the common configuration in a file called `webpack.common.js`.
  -  
  +
   +makeExample('webpack/ts/config/webpack.common.js', null, 'config/webpack.common.js')(format=".")
   
  +a#inside-webpack-commonjs
   :marked
     ### Inside _webpack.common.js_
  -  Webpack is a NodeJS-based tool that reads configuration from a JavaScript _commonjs_ module file.
  +  Webpack is a NodeJS-based tool that reads configuration from a JavaScript commonjs module file.
   
     The configuration imports dependencies with `require` statements
     and exports several objects as properties of a `module.exports` object.
   
  -  * [`entries`](#common-entries) - the entry-point files that define the bundles.
  -  * [`resolve`](#common-resolve) - how to resolve file names when they lack extensions.
  -  * [`module.rules`](#common-rules) - `module` is an object with `rules` for deciding how files are loaded.
  -  * [`plugins`](#common-plugins) - creates instances of the plugins.
  +  * [`entry`](#common-entries)&mdash;the entry-point files that define the bundles.
  +  * [`resolve`](#common-resolve)&mdash;how to resolve file names when they lack extensions.
  +  * [`module.rules`](#common-rules)&mdash; `module` is an object with `rules` for deciding how files are loaded.
  +  * [`plugins`](#common-plugins)&mdash;creates instances of the plugins.
   
   a#common-entries
   :marked
  -  #### _entries_
  -
  -  The first export is the *entries* object, described above:
  -  
  +  #### _entry_
  +
  +  The first export is the `entry` object:
  +
   +makeExample('webpack/ts/config/webpack.common.js', 'entries', 'config/webpack.common.js')(format=".")
   :marked
  -  This *entries* object defines the three bundles:
  -  
  -  * polyfills - the polyfills needed to run Angular applications in most modern browsers.
  -  * vendor - the third-party dependencies such as Angular, lodash, and bootstrap.css.
  -  * app - the application code.
  +  This `entry` object defines the three bundles:
  +
  +  * `polyfills`&mdash;the polyfills needed to run Angular applications in most modern browsers.
  +  * `vendor`&mdash;the third-party dependencies such as Angular, lodash, and bootstrap.css.
  +  * `app`&mdash;the application code.
   
   a#common-resolve
   :marked
     #### _resolve_ extension-less imports
   
  -  The app will `import` dozens if not hundreds of JavaScript and TypeScript files. 
  +  The app will `import` dozens if not hundreds of JavaScript and TypeScript files.
     You could write `import` statements with explicit extensions like this example:
   
   .code-example
  
positive.code: <a id="what-is-webpack"></a>
  :marked
    ## 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 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. 
    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.
    
    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: {
  
negative.code:   src/main.ts,
    src/assets/css/styles.css`
  )
  
  +makeTabs(
    `webpack/ts/src/app/app.component.ts,
    webpack/ts/src/app/app.component.html,
  