anchor.diff:    After that brief orientation, you are ready to build your own Webpack configuration for Angular apps.
   
     经过简短的培训之后，我们准备为Angular应用构建一份自己的Webpack配置了。
  +
     Begin by setting up the development environment.
   
     从设置开发环境开始。
  
positive.code:   :marked
      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 
    for production or development.
  
  a(id="common-configuration")
  .l-main-section
  :marked
    ### 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=".")
  
  :marked
    ### Inside _webpack.common.js_
    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.
  
  a#common-entries
  :marked
    #### _entries_
  
    The first export is the *entries* object, described above:
    
  +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.
  
  a#common-resolve
  :marked
    #### _resolve_ extension-less imports
  
    The app will `import` dozens if not hundreds of JavaScript and TypeScript files. 
    You could write `import` statements with explicit extensions like this example:
  +makeExample('webpack/ts-snippets/webpack.config.snippets.ts', 'single-import')(format=".")
  
  :marked
    But most `import` statements don't mention the extension at all.
    Tell Webpack to resolve extension-less file requests by looking for matching files with
    `.ts` extension or `.js` extension (for regular JavaScript files and pre-compiled TypeScript files).
    
  +makeExample('webpack/ts/config/webpack.common.js', 'resolve', 'config/webpack.common.js')(format=".")
  .l-sub-section
  
negative.code:   You'll need polyfills to run an Angular application in most browsers as explained
    in the [_Browser Support_](browser-support.html) guide.
  
    我们在[_浏览器支持_](browser-support.html)章节里解释过，Angular应用要能在大多数的浏览器里运行，它还需要一些polyfills。
  
    Polyfills should be bundled separately from the application and vendor bundles.
    Add a `polyfills.ts` like this one to the `src/` folder.
  
    Polyfills最好跟应用代码和vendor代码区分开来单独打包，所以我们需要在`src/`文件夹里添加一个`polyfills.ts`文件，代码如下：
  
  +makeExample('webpack/ts/src/polyfills.ts', '', 'src/polyfills.ts')(format=".")
  
  