anchor.diff:    [**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.
  -  
  +
  +  [**Webpack**](https://webpack.github.io/) est un agrégateur de module populaire, 
  +  un outil pour lier le code source d'application en _paquets_ adaptés 
  +  et pour charger ce code à partir d'un serveur dans un navigateur.
  +
     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.
  +
  +  C'est une excellente alternative à *SystemJS* que nous utilisons dans la documentation.
  +  Dans ce guide, nous avons un aperçu de Webpack et comment l'utiliser avec des applications Angular 2.
     
     <a id="top"></a>
     ## Table of contents
  +  ## Table des matières
     
     [What is Webpack?](#what-is-webpack)
  +
  +  [Qu'est-ce que Webpack?](#what-is-webpack)
     
       * [Entries and outputs](#entries-outputs)
  +    * [Entrées et sorties](#entries-outputs)
       * [Loaders](#loaders)
  +    * [Chargeurs](#loaders)
       * [Plugins](#plugins)
  +    * [Extensions](#plugins)
       
     [Configuring Webpack](#configure-webpack)
  +
  +  [Configurer Webpack](#configure-webpack)
     
       * [Common configuration](#common-configuration)
  +    * [Configuration classique](#common-configuration)
       * [Development configuration](#development-configuration)
  +    * [Configuration en développement](#development-configuration)
       * [Production configuration](#production-configuration)
  +    * [Configuration en production](#production-configuration)
       * [Test configuration](#test-configuration)
  +    * [Configuration en test](#test-configuration)
       
     [Trying it out](#try)
  +
  +  [Essayez](#try)
     
     [Conclusions](#conclusions)
       
  
positive.code:   Webpack is a NodeJS-based tool so its configuration is a JavaScript _commonjs_ module file 
    that begins with `require` statements as such files do. 
    
    The configuration exports several objects, beginning with the *entries* described earlier:
    
  +makeExample('webpack/ts/config/webpack.common.js', 'entries', 'config/webpack.common.js')(format=".")
  :marked
    We are splitting our application into three bundles:
    
    * polyfills - the standard polyfills we require to run Angular 2 applications in most modern browsers.
    * vendor - the vendor files we need: Angular 2, lodash, bootstrap.css...
    * app - our application code.
    
  .callout.is-critical
    header Loading polyfills
    :marked
      Load Zone.js early, immediately after the other ES6 and metadata shims.
    
  :marked
    Our app will `import` dozens if not hundreds of JavaScript and TypeScript files. 
    We _might_ write `import` statements with explicit extensions as in this example:
  +makeExample('webpack/ts-snippets/webpack.config.snippets.ts', 'single-import')(format=".")
  
  :marked
    But most of our `import` statements won't mention the extension at all.
    So we  tell Webpack to _resolve_ module file requests by looking for matching files with
    
    * an explicit extension (signified by the empty extension string, `''`) or 
    * `.js` extension (for regular JavaScript files and pre-compiled TypeScript files) or 
    * `.ts` extension.
    
  +makeExample('webpack/ts/config/webpack.common.js', 'resolve', 'config/webpack.common.js')(format=".")
  .l-sub-section
    :marked
      We could add  `.css` and `.html` later if we want Webpack to resolve extension-less files with _those_ extension too.
  :marked
    Next we specify the loaders:
    
  +makeExample('webpack/ts/config/webpack.common.js', 'loaders', 'config/webpack.common.js')(format=".")
  
  :marked
    * ts - a loader to transpile our 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)
  .l-sub-section
    :marked
      The first pattern excludes `.css` files within the `/src/app` directories where our component-scoped styles sit.
      It includes only `.css` files located at or above `/src`; these are the application-wide styles.
      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;
      which is what Angular expects to do with styles specified in a `styleUrls` metadata property.
  
  .l-sub-section
    :marked
      Multiple loaders can be also chained using the array notation.
  
  :marked
    Finally we add two plugins:
    
  +makeExample('webpack/ts/config/webpack.common.js', 'plugins', 'config/webpack.common.js')(format=".")
  
  
negative.code: .l-sub-section
    :marked
      Many of these files and much of their content should be familiar from other Angular 2 documentation chapters.
  
      Beaucoup de ces fichiers et une grande partie de leur contenu doivent être similaires avec d'autres chapitres de la documentation d'Angular 2.
      
      Learn about the `package.json` in the [npm packages](../guide/npm-packages.html) chapter.
      We require packages for Webpack use in addition to the ones listed in that chapter.
  
      En savoir plus sur le `package.json` dans le chapitre [paquets npm](../guide/npm-packages.html).
      Nous avons besoin de paquets supplémentaires pour Webpack de ceux énumérés dans ce chapitre.
      
      Learn about `tsconfig.json` and `typings.json` in the [Typescript configuration](../guide/typescript-configuration.html) chapter.
  
      En savoir plus sur `tsconfig.json` et `typings.json` dans le chapitre [configuration de Typescript](../guide/typescript-configuration.html).
  :marked
    Open a terminal/console window and install the *npm* packages with `npm install`.
  
    Ouvrez une fenêtre du terminal/console et installez les paquets *npm* avec `npm install`.
   
  a(id="common-configuration")
  .l-main-section
  :marked
    ### Common Configuration
    ### Configuration classique
    
    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`.
    
    Nous allons définir des configurations distinctes pour les environnement de développement, de production et de test.
    Toutes les trois ont une configuration en commun.
    Nous rassemblons cette configuration commune dans un fichier séparé appelé `webpack.common.js`.
  
    Let's see the entire file and then walk through it a section at a time:
  
    Nous allons voir le fichier complet puis avancer une section à la fois&nbsp;:
    
  +makeExample('webpack/ts/config/webpack.common.js', null, 'config/webpack.common.js')(format=".")
  
  