anchor.diff:    We tell Webpack to find and load our test files (the files ending in `.spec.ts`).
     Each spec file imports all &mdash; and only &mdash; the application source code that it tests.
     Webpack loads just _those_ specific application files and ignores the other files that we aren't testing.
  -  
  +
  +  注意，我们_并没有_明确加载我们的应用代码。
  +  我们只告诉Webpack查找并加载我们的测试文件(文件名以`.spec.ts`结尾)。
  +  每个规约(spec)文件都导入了所有(也只有)它测试所需的应用源码。
  +  Webpack只加载_那些_特定的应用文件，而忽略所有其它我们不会测试到的。
  +
   :marked
     Grab the app code at the end of this guide and try:
  -  
  +
  +  抓取本指南底部的应用代码，并试一试：
  +
   code-example(format="").
     npm test
   
   <a id="try"></a>
   :marked
     ## Trying it out
  -  
  +
  +  ## 试一试
  +
     Here is the source code for a small application that we can bundle with the
     Webpack techniques we learned in this chapter.
  -  
  +
  +  这里是一个小型应用的全部源码，我们可以用本章中学到的Webpack技术打包它们。
  +
   +makeTabs(
     `webpack/ts/src/index.html,
     webpack/ts/src/main.ts,
  
positive.code: .l-main-section
  :marked
    ### Loaders
  
    Webpack can bundle any kind of file: JavaScript, TypeScript, CSS, SASS, LESS, images, html, fonts, whatever.
    Webpack itself doesn't know what to do with a non-JavaScript file.
    We teach it to process such files into JavaScript with *loaders*. 
    Here we configure loaders for TypeScript and CSS:
    
  +makeExample('webpack/ts-snippets/webpack.config.snippets.ts', 'loaders', 'webpack.config.js (two entries)')(format=".")
  
  :marked
    As Webpack encounters `import` statements like these ...
    
  +makeExample('webpack/ts-snippets/webpack.config.snippets.ts', 'imports')(format=".")
  
  :marked
    ... it applies the `test` RegEx patterns. When a pattern matches the filename, Webpack processes the file with the associated loader. 
    
    The first `import` file matches the `.ts` pattern so Webpack processes it with the `ts` (TypeScript) loader.
    The imported file doesn't match the second pattern so its loader is ignored. 
    
    The second `import` matches the second `.css` pattern for which we have *two* loaders chained by the (!) character. 
    Webpack applies chained loaders *right to left* so it applies 
    the `css` loader first (to flatten CSS `@import` and `url(...)` statements) and
     then the `style` loader (to append the css inside *&lt;style&gt;* elements on the page).
    
  a(id="plugins")
  .l-main-section
  :marked
    ### Plugins
    
    Webpack has a build pipeline with well-defined phases.
    We tap into that pipeline with plugins such as the `uglify` minification plugin:
    
  +makeExample('webpack/ts-snippets/webpack.config.snippets.ts', 'plugins')(format=".")
    
  a(id="configure-webpack")
  .l-main-section
  :marked
    ## Configure Webpack
    
    After that brief orientation, we are ready to build our own Webpack configuration for Angular 2 apps. 
    
    Begin by setting up the development environment.
    
    Create a **new project folder**
  code-example(format="").
    mkdir angular2-webpack
    cd    angular2-webpack
  
  :marked
    Add these files to the root directory:
    
  +makeTabs(
    `webpack/ts/package.webpack.json,
    webpack/ts/typings.1.json,
  
negative.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.
  
    [**Webpack**](https://webpack.github.io/)是一个广受欢迎的模块打包器，
    这个工具用来把程序源码打包到一些方便易用的_块儿_中，以便把这些代码从服务器加载到浏览器中。
  
    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.
  
    这是我们在文档中到处使用的这个*SystemJS*的一个卓越替代品。这篇指南会带我们尝尝Webpack的滋味，并学习如何在Angular 2程序中使用它。
  
    <a id="top"></a>
    ## Table of contents
    ## 目录
  
    [What is Webpack?](#what-is-webpack)
  
    [什么是Webpack？](#what-is-webpack)
  
      * [Entries and outputs](#entries-outputs)
  
      * [入口与输出](#entries-outputs)
  
      * [Loaders](#loaders)
  
      * [加载器](#loaders)
  
      * [Plugins](#plugins)
  
      * [插件](#plugins)
  
    [Configuring Webpack](#configure-webpack)
  
    [配置Webpack](#configure-webpack)
  
      * [Common configuration](#common-configuration)
  
      * [公共配置](#common-configuration)
  
      * [Development configuration](#development-configuration)
  
      * [开发环境配置](#development-configuration)
  
      * [Production configuration](#production-configuration)
  
      * [生产环境配置](#production-configuration)
  
      * [Test configuration](#test-configuration)
  
      * [测试环境配置](#test-configuration)
  
    [Trying it out](#try)
  
    [试一下](#try)
  
    [Conclusions](#conclusions)
  
    [总结](#conclusions)
  
  .l-main-section
  <a id="what-is-webpack"></a>
  :marked
    ## What is Webpack?
  
    ## 什么是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是一个强力的模块打包器。
    所谓_包儿(bundle)_就是一个JavaScript文件，它把一堆_资源(assets)_合并在一起，以便它们可以在同一个文件请求中发回给客户端。
    包儿中可以包含JavaScript、CSS样式、HTML以及很多其它类型的文件。
  
    Webpack roams over your application source code,
    looking for `import` statements, building a dependency graph, and emitting one (or more) _bundles_.
    With plugin "loaders" Webpack can preprocess and minify different non-JavaScript files such as TypeScript, SASS, and LESS files.
  
    Webpack会遍历你应用中的所有源码，查找`import`语句，构建出依赖图谱，并产出一个(或多个)_包儿_。
    通过“加载器(loaders)”插件，Webpack可以对各种非JavaScript文件进行预处理和最小化(Minify)，比如TypeScript、SASS和LESS文件等。
  
    We determine what Webpack does and how it does it with a JavaScript configuration file, `webpack.config.js`.
  
    我们通过一个JavaScript配置文件`webpack.config.js`来决定Webpack做什么以及如何做。
  
  a(id="entries-outputs")
  .l-main-section
  :marked
    ### Entries and outputs
  
    ### 入口与输出
  
    We feed Webpack with one or more *entry* files and let it find and incorporate the dependencies that radiate from those entries.
    In this example, we start from the application's root file, `src/app.ts`:
  
    我们给Webpack提供一个或多个*入口*文件，来让它查找与合并那些从这些入口点发散出去的依赖。
    在下面这个例子中，我们的入口点是该应用的根文件`src/app.ts`：
  
  +makeExample('webpack/ts-snippets/webpack.config.snippets.ts', 'one-entry', 'webpack.config.js (single entry)')(format=".")
  
  :marked
    Webpack inspects that file and traverses its `import` dependencies recursively.
  
    Webpack探查那个文件，并且递归遍历它的`import`依赖。
  
  +makeExample('webpack/ts-snippets/webpack.config.snippets.ts', 'app-example', 'src/app.ts')(format=".")
  
  :marked
    Here it sees that we're importing *@angular/core* so it adds that to its dependency list for (potential) inclusion in the bundle.
    It opens *@angular/core* and follows _its_ network of `import` statements until it has build the complete dependency graph from `app.ts` down.
  
    这里，它看到我们正在导入*@angular/core*，于是它把这个文件加入它的依赖列表里，为(有可能)把它打进包儿中做准备。
    它打开*@angular/core*并追踪由_它的_`import`语句构成的网络，直到构建出从`app.ts`往下的整个依赖图谱。
  
    Then it **outputs** these files to the `app.js` _bundle file_ designated in configuration:
  
    然后它把这些文件**输出**到当前配置所指定的_包儿文件_`app.js`中：
  
  +makeExample('webpack/ts-snippets/webpack.config.snippets.ts', 'one-output', 'webpack.config.js (single output)')(format=".")
  
  :marked
    This `app.js` output bundle is a single JavaScript file that contains our application source and its dependencies.
    We'll load it later with a &lt;script&gt; tag in our index.html.
  
    这个`app.js`输出包儿是个单一的JavaScript文件，它包含我们程序的源码以及它的所有依赖。
    后面我们将在`index.html`中用`&lt;script&gt;`标签来加载它。
  
    #### Multiple bundles
  
    #### 多重包儿
  
    We probably do not want one giant bundle of everything.
    We'll likely prefer to separate our volatile application app code from comparatively stable vendor code modules.
  
    我们可能不会希望得到一个打进所有东西的巨型包儿。
    我们可能更喜欢把多变的应用代码从相对稳定的第三方供应商模块中分离出来。
  
    We change the configuration so that we have two entry points, `app.ts` and `vendor.ts`:
  
    我们修改配置，来获得两个入口点：`app.ts`和`vendor.ts`：
  
  +makeExample('webpack/ts-snippets/webpack.config.snippets.ts', 'two-entries','webpack.config.js (two entries)')(format=".")
  :marked
    Webpack constructs two separate dependency graphs
    and emits *two* bundle files, one called `app.js` containing only our application code and
    another called `vendor.js` with all the vendor dependencies.
  
    Webpack会构造出两个独立的依赖图谱，并产出*两个*包儿文件：一个叫做`app.js`，它只包含我们的应用代码；另一个叫做`vendor.js`，它包含所有的供应商依赖。
  
  .l-sub-section
    :marked
      The `[name]` in the output name is a Webpack *placeholder* that is replaced with the entry names.
      `app` and `vendor` respectively.
  
      输出文件名中出现的`[name]`是一个Webpack的*占位符*，它将被替换为入口点的名字，分别是`app`和`vendor`。
  
      We need a plugin to make this work; we'll [cover that later](#commons-chunk-plugin) in the chapter.
  
      我们需要一个插件来完成此项工作，本章[后面](#commons-chunk-plugin)的部分会覆盖它。
  
  :marked
    We met `app.ts` earlier. We wrote `vendor.ts` such that it imports the vendor modules we need:
  
    我们以前遇到过`app.ts`，就重复了。我们还要再写一个`vendor.ts`，让它导入所需的那些供应商模块：
  
  +makeExample('webpack/ts/src/vendor.ts', null,'src/vendor.ts')(format=".")
  
  
  