Webpack是一个广受欢迎的模块打包器， 这个工具用来把程序源码打包到一些方便易用的块中，以便把这些代码从服务器加载到浏览器中。

Webpack 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.

它是我们在文档中到处使用的SystemJS的一个优秀替代品。这篇指南会带我们尝尝Webpack的滋味，并解释如何在Angular程序中使用它。

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.

目录

Contents

• 什么是Webpack？

  What is Webpack?

  • 入口与输出

    Entries and outputs

  • 多重包

    Multiple bundles

  • 加载器

    Loaders

  • 插件

    Plugins

• 配置Webpack

  Configuring Webpack

  • Polyfills

  • 公共配置

    Common configuration

  • 深入webpack.common.js

    Inside webpack.common.js

    • 入口

      entry

    • 解析无扩展名的导入

      resolve extension-less imports

    • module.rules

    • 插件

      Plugins

    • CommonsChunkPlugin

    • HtmlWebpackPlugin

  • 针对特定环境进行配置

    Environment specific configuration

  • 开发环境配置

    Development configuration

  • 生产环境配置

    Production configuration

  • 测试环境配置

    Test configuration

• 试一下

  Trying it out

• 重点

  Highlights

• 总结

  Conclusion

你还可以点这里下载最终结果。

You can also download the final result.

什么是Webpack？

What is Webpack?

Webpack是一个强力的模块打包器。 所谓包(bundle)就是一个JavaScript文件，它把一堆资源(assets)合并在一起，以便它们可以在同一个文件请求中发回给客户端。 包中可以包含JavaScript、CSS样式、HTML以及很多其它类型的文件。

Webpack is a powerful module bundler. A bundle is a JavaScript file that incorporates 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会遍历你应用中的所有源码，查找import语句，构建出依赖图谱，并产出一个(或多个)包。 通过插件和规则，Webpack可以对各种非JavaScript文件进行预处理和最小化(Minify)，比如TypeScript、SASS和LESS文件等。

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.

我们通过一个JavaScript配置文件webpack.config.js来决定Webpack做什么以及如何做。

You determine what Webpack does and how it does it with a JavaScript configuration file, webpack.config.js.

入口与输出

Entries and outputs

我们给Webpack提供一个或多个入口文件，来让它查找与合并那些从这些入口点发散出去的依赖。 在下面这个例子中，我们的入口点是该应用的根文件src/app.ts：

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:

entry: {
  'app': './src/main.ts'
},

Webpack探查那个文件，并且递归遍历它的import依赖。

Webpack inspects that file and traverses its import dependencies recursively.

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent { }

这里，Webpack看到我们正在导入@angular/core，于是就这个文件加入到它的依赖列表里，为(有可能)把该文件打进包中做准备。 它打开@angular/core并追踪由该文件的import语句构成的网络，直到构建出从main.ts往下的整个依赖图谱。

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.

然后它把这些文件输出到当前配置所指定的包文件app.js中：

Then it outputs these files to the app.js bundle file designated in configuration:

output: {
  filename: 'app.js'
}

这个app.js输出包是个单一的JavaScript文件，它包含程序的源码及其所有依赖。 后面我们将在index.html中用<script>标签来加载它。

This app.js output bundle is a single JavaScript file that contains the application source and its dependencies. You'll load it later with a <script> tag in the index.html.

多重包

Multiple bundles

我们可能不会希望把所有东西打进一个巨型包，而更喜欢把多变的应用代码从相对稳定的第三方提供商模块中分离出来。

You probably don't want one giant bundle of everything. It's preferable to separate the volatile application app code from comparatively stable vendor code modules.

所以要修改配置，以获得两个入口点：main.ts和vendor.ts：

Change the configuration so that it has two entry points, main.ts and vendor.ts:

entry: {
  app: 'src/app.ts',
  vendor: 'src/vendor.ts'
},

output: {
  filename: '[name].js'
}

Webpack会构造出两个独立的依赖图谱，并产出两个包文件：一个叫做app.js，它只包含我们的应用代码；另一个叫做vendor.js，它包含所有的提供商依赖。

Webpack constructs two separate dependency graphs and emits two bundle files, one called app.js containing only the application code and another called vendor.js with all the vendor dependencies.

要想告诉Webpack哪些文件属于vendor包，可以添加一个vendor.ts文件，它只导入该应用的第三方模块：

To tell Webpack what belongs in the vendor bundle, add a vendor.ts file that only imports the application's third-party modules:

// Angular
import '@angular/platform-browser';
import '@angular/platform-browser-dynamic';
import '@angular/core';
import '@angular/common';
import '@angular/http';
import '@angular/router';

// RxJS
import 'rxjs';

// Other vendors for example jQuery, Lodash or Bootstrap
// You can import js, ts, css, sass, ...

加载器(Loader)

Loaders

Webpack可以打包任何类型的文件：JavaScript、TypeScript、CSS、SASS、LESS、图片、HTML以及字体文件等等。 但Webpack本身只认识JavaScript文件。 我们要通过加载器来告诉它如何把这些文件处理成JavaScript文件。 在这里，我们为TypeScript和CSS文件配置了加载器。

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.

rules: [
  {
    test:/\.ts$/,
    loader: 'awesome-typescript-loader'
  },
  {
    test: /\.css$/,loaders: 'style-loader!css-loader'
  }
]

当Webpack遇到如下所示的import语句时，它就会调用正则表达式的test方法。

When Webpack encounters import statements like the following, it applies the test RegEx patterns.

import { AppComponent } from './app.component.ts';

import 'uiframework/dist/uiframework.css';

如果一个模式匹配上文件名，Webpack就用它所关联的加载器处理这个文件。

When a pattern matches the filename, Webpack processes the file with the associated loader.

第一个import文件匹配上了.ts模式，于是Webpack就用awesome-typescript-loader加载器处理它。 导入的文件没有匹配上第二个模式，于是它的加载器就被忽略了。

The first import file matches the .ts pattern so Webpack processes it with the awesome-typescript-loader. The imported file doesn't match the second pattern so its loader is ignored.

第二个import匹配上了第二个.css模式，它有两个用叹号字符(!)串联起来的加载器。 Webpack会从右到左逐个应用串联的加载器，于是它先应用了css加载器(用来平面化CSS的@import和url(...)语句)， 然后应用了style加载器(用来把css追加到页面上的<style>元素中)。

The second import matches the second .css pattern for which you 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. Then it applies the style loader to append the css inside <style> elements on the page.

插件

Plugins

Webpack有一条构建流水线，它被划分成多个经过精心定义的阶段(phase)。 我们可以把插件(比如uglify代码最小化插件)挂到流水线上：

Webpack has a build pipeline with well-defined phases. Tap into that pipeline with plugins such as the uglify minification plugin:

plugins: [
  new webpack.optimize.UglifyJsPlugin()
]

配置Webpack

Configuring Webpack

经过简短的培训之后，我们准备为Angular应用构建一份自己的Webpack配置了。

After that brief orientation, you are ready to build your own Webpack configuration for Angular apps.

从设置开发环境开始。

Begin by setting up the development environment.

创建一个新的项目文件夹。

Create a new project folder.

mkdir angular-webpack
cd    angular-webpack

把下列文件添加到根目录下：

Add these files :

{
  "name": "angular2-webpack",
  "version": "1.0.0",
  "description": "A webpack starter for Angular",
  "scripts": {
    "start": "webpack-dev-server --inline --progress --port 8080",
    "test": "karma start",
    "build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail"
  },
  "license": "MIT",
  "dependencies": {
    "@angular/common": "~4.0.0",
    "@angular/compiler": "~4.0.0",
    "@angular/core": "~4.0.0",
    "@angular/forms": "~4.0.0",
    "@angular/http": "~4.0.0",
    "@angular/platform-browser": "~4.0.0",
    "@angular/platform-browser-dynamic": "~4.0.0",
    "@angular/router": "~4.0.0",
    "core-js": "^2.4.1",
    "rxjs": "5.0.1",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@types/node": "^6.0.45",
    "@types/jasmine": "2.5.36",
    "angular2-template-loader": "^0.6.0",
    "awesome-typescript-loader": "^3.0.4",
    "css-loader": "^0.26.1",
    "extract-text-webpack-plugin": "2.0.0-beta.5",
    "file-loader": "^0.9.0",
    "html-loader": "^0.4.3",
    "html-webpack-plugin": "^2.16.1",
    "jasmine-core": "^2.4.1",
    "karma": "^1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-jasmine": "^1.0.2",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^2.0.1",
    "null-loader": "^0.1.1",
    "raw-loader": "^0.5.1",
    "rimraf": "^2.5.2",
    "style-loader": "^0.13.1",
    "typescript": "~2.0.10",
    "webpack": "2.2.1",
    "webpack-dev-server": "2.4.1",
    "webpack-merge": "^3.0.0"
  }
}

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es2015", "dom"],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  }
}

module.exports = require('./config/webpack.dev.js');

module.exports = require('./config/karma.conf.js');

var path = require('path');
var _root = path.resolve(__dirname, '..');
function root(args) {
  args = Array.prototype.slice.call(arguments, 0);
  return path.join.apply(path, [_root].concat(args));
}
exports.root = root;

打开命令行窗口并安装这些npm包

Open a terminal window and install the npm packages.

npm install

Polyfills

我们在浏览器支持章节里解释过，Angular应用要能在大多数的浏览器里运行，它还需要一些polyfills。

You'll need polyfills to run an Angular application in most browsers as explained in the Browser Support guide.

Polyfills最好跟应用代码和vendor代码区分开来单独打包，所以我们需要在src/文件夹里添加一个polyfills.ts文件，代码如下：

Polyfills should be bundled separately from the application and vendor bundles. Add a polyfills.ts like this one to the src/ folder.

import 'core-js/es6';
import 'core-js/es7/reflect';
require('zone.js/dist/zone');

if (process.env.ENV === 'production') {
  // Production
} else {
  // Development and test
  Error['stackTraceLimit'] = Infinity;
  require('zone.js/dist/long-stack-trace-zone');
}

由于这个包最先加载，所以polyfills.ts非常适合用来配置浏览器环境，如生产环境配置或是开发环境。

Because this bundle file will load first, polyfills.ts is also a good place to configure the browser environment for production or development.

通用配置

Common configuration

开发、生产、测试等不同的环境通常会分开配置，但实际上这些配置也有很多地方是通用的。

Developers typically have separate configurations for development, production, and test environments. All three have a lot of configuration in common.

我们可以把这些通用的配置收归到一个文件，命名为webpack.common.js。

Gather the common configuration in a file called webpack.common.js.

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var helpers = require('./helpers');

module.exports = {
  entry: {
    'polyfills': './src/polyfills.ts',
    'vendor': './src/vendor.ts',
    'app': './src/main.ts'
  },

  resolve: {
    extensions: ['.ts', '.js']
  },

  module: {
    rules: [
      {
        test: /\.ts$/,
        loaders: [
          {
            loader: 'awesome-typescript-loader',
            options: { configFileName: helpers.root('src', 'tsconfig.json') }
          } , 'angular2-template-loader'
        ]
      },
      {
        test: /\.html$/,
        loader: 'html-loader'
      },
      {
        test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
        loader: 'file-loader?name=assets/[name].[hash].[ext]'
      },
      {
        test: /\.css$/,
        exclude: helpers.root('src', 'app'),
        loader: ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: 'css-loader?sourceMap' })
      },
      {
        test: /\.css$/,
        include: helpers.root('src', 'app'),
        loader: 'raw-loader'
      }
    ]
  },

  plugins: [
    // Workaround for angular/angular#11580
    new webpack.ContextReplacementPlugin(
      // The (\\|\/) piece accounts for path separators in *nix and Windows
      /angular(\\|\/)core(\\|\/)@angular/,
      helpers.root('./src'), // location of your src
      {} // a map of your routes
    ),

    new webpack.optimize.CommonsChunkPlugin({
      name: ['app', 'vendor', 'polyfills']
    }),

    new HtmlWebpackPlugin({
      template: 'src/index.html'
    })
  ]
};

webpack.common.js解读

Inside webpack.common.js

Webpack是基于NodeJS的一个工具，它能够从一个commonjs规范的JavaScript模块文件里读取配置。

Webpack is a NodeJS-based tool that reads configuration from a JavaScript commonjs module file.

这个配置文件是通过require语句导入依赖，然后将多个对象作为module.exports对象的属性导出。

The configuration imports dependencies with require statements and exports several objects as properties of a module.exports object.

• entries - 包体的入口文件。

  entry—the entry-point files that define the bundles.

• resolve - 省略扩展名时如何解释文件名。

  resolve—how to resolve file names when they lack extensions.

• module.rules - module是一个对象，里面的rules属性用来决定文件如何加载。

  module.rules— module is an object with rules for deciding how files are loaded.

• plugins - 创建插件的实例。

  plugins—creates instances of the plugins.

entry

如上所述，第一个导出的对象是entries：

The first export is the entry object:

  entry: {
    'polyfills': './src/polyfills.ts',
    'vendor': './src/vendor.ts',
    'app': './src/main.ts'
  },

entry对象定义了三个包：

This entry object defines the three bundles:

• polyfills - 使得Angular应用能够运行在大多数的现代浏览器。

  polyfills—the polyfills needed to run Angular applications in most modern browsers.

• vendor - 第三方依赖，如Angular、lodash和bootstrap.css。

  vendor—the third-party dependencies such as Angular, lodash, and bootstrap.css.

• app - 应用代码。

  app—the application code.

resolve 无扩展名的文件导入

resolve extension-less imports

如果你的应用程序只须import几十个JavaScript或TypeScript文件，而不是几百个，你可以在import语句里完整写上扩展名，如：

The app will import dozens if not hundreds of JavaScript and TypeScript files. You could write import statements with explicit extensions like this example:

import { AppComponent } from './app.component.ts';

但实际上大部分import语句都不带扩展名，我们可以告诉Webpack，在查找这些没有扩展名的文件时，自动加上.ts或者.js扩展名来匹配。

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).

resolve: {
  extensions: ['.ts', '.js']
},

module.rules

Rules用来告诉Webpack加载不同文件或模块时该用哪个加载器。

Rules tell Webpack which loaders to use for each file, or module:

module: {
  rules: [
    {
      test: /\.ts$/,
      loaders: [
        {
          loader: 'awesome-typescript-loader',
          options: { configFileName: helpers.root('src', 'tsconfig.json') }
        } , 'angular2-template-loader'
      ]
    },
    {
      test: /\.html$/,
      loader: 'html-loader'
    },
    {
      test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
      loader: 'file-loader?name=assets/[name].[hash].[ext]'
    },
    {
      test: /\.css$/,
      exclude: helpers.root('src', 'app'),
      loader: ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: 'css-loader?sourceMap' })
    },
    {
      test: /\.css$/,
      include: helpers.root('src', 'app'),
      loader: 'raw-loader'
    }
  ]
},

• awesome-typescript-loader - 一个用于把TypeScript代码转译成ES5的加载器，它会由tsconfig.json文件提供指导

  awesome-typescript-loader—a loader to transpile the Typescript code to ES5, guided by the tsconfig.json file.

• angular2-template-loader - 用于加载Angular组件的模板和样式

  angular2-template-loader—loads angular components' template and styles.

• html-loader - 为组件模板准备的加载器

  html-loader—for component templates.

• images/fonts - 图片和字体文件也能被打包。

  images/fonts—Images and fonts are bundled as well.

• CSS - 第一个模式匹配应用级样式，第二个模式匹配组件局部样式(就是在组件元数据的styleUrls属性中指定的那些)。

  CSS—the first pattern matches application-wide styles; the second handles component-scoped styles (the ones specified in a component's styleUrls metadata property).

plugins

最后，创建三个插件实例：

Finally, create instances of three plugins:

plugins: [
  // Workaround for angular/angular#11580
  new webpack.ContextReplacementPlugin(
    // The (\\|\/) piece accounts for path separators in *nix and Windows
    /angular(\\|\/)core(\\|\/)@angular/,
    helpers.root('./src'), // location of your src
    {} // a map of your routes
  ),

  new webpack.optimize.CommonsChunkPlugin({
    name: ['app', 'vendor', 'polyfills']
  }),

  new HtmlWebpackPlugin({
    template: 'src/index.html'
  })
]

CommonsChunkPlugin

app.js包应该只包含应用代码。所有第三方代码都应该放进vendor.js包中。

The app.js bundle should contain only application code. All vendor code belongs in the vendor.js bundle.

当然，应用代码中还是要imports第三方代码。 Webpack还没有智能到自动把提供商代码排除在app.js包之外的程度。 CommonsChunkPlugin插件能完成此工作。

Of course the application code imports vendor code. On its own,Webpack is not smart enough to keep the vendor code out of the app.js bundle. The CommonsChunkPlugin does that job.

HtmlWebpackPlugin

Webpack生成了一些js和css文件。 虽然我们可以手动把它们插入到index.html中，但那样既枯燥又容易出错。 Webpack可以通过HtmlWebpackPlugin自动为我们注入那些script和link标签。

Webpack generates a number of js and CSS files. You could insert them into the index.html manually. That would be tedious and error-prone. Webpack can inject those scripts and links for you with the HtmlWebpackPlugin.

环境相关的配置

Environment-specific configuration

webpack.common.js配置做了大部分繁重的工作。 通过合并它们特有的配置，我们可以基于webpack.common为目标环境创建独立的、环境相关的配置文件。

The webpack.common.js configuration file does most of the heavy lifting. Create separate, environment-specific configuration files that build on webpack.common by merging into it the peculiarities particular to the target environments.

这些文件越小越简单越好。

These files tend to be short and simple.

开发环境配置

Development configuration

下面是开发环境的而配置文件webpack.dev.js：

Here is the webpack.dev.js development configuration file.

var webpackMerge = require('webpack-merge');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var commonConfig = require('./webpack.common.js');
var helpers = require('./helpers');

module.exports = webpackMerge(commonConfig, {
  devtool: 'cheap-module-eval-source-map',

  output: {
    path: helpers.root('dist'),
    publicPath: '/',
    filename: '[name].js',
    chunkFilename: '[id].chunk.js'
  },

  plugins: [
    new ExtractTextPlugin('[name].css')
  ],

  devServer: {
    historyApiFallback: true,
    stats: 'minimal'
  }
});

开发环境下的构建依赖于Webpack的开发服务器，我们在靠近文件底部的地方配置了它。

The development build relies on the Webpack development server, configured near the bottom of the file.

虽然我们告诉Webpack把输出包放到dist目录，但实际上开发服务器把这些包都放在了内存里，而不会把它们写到硬盘中。 所以在dist目录下是找不到任何文件的(至少现在这个开发环境下构建时没有)。

Although you tell Webpack to put output bundles in the dist folder, the dev server keeps all bundles in memory; it doesn't write them to disk. You won't find any files in the dist folder ,at least not any generated from this development build.

HtmlWebpackPlugin(由webpack.common.js引入)插件使用了publicPath和filename设置， 来向index.html中插入适当的<script>和<link>标签。

The HtmlWebpackPlugin ,added in webpack.common.js, uses the publicPath and the filename settings to generate appropriate <script> and <link> tags into the index.html.

默认情况下，我们这些CSS样式会被埋没在JavaScript包中。ExtractTextPlugin会把它们提取成外部.css文件， 这样HtmlWebpackPlugin插件就会转而把一个<link>标签写进index.html了。

The CSS styles are buried inside the Javascript bundles by default. The ExtractTextPlugin extracts them into external .css files that the HtmlWebpackPlugin inscribes as <link> tags into the index.html.

要了解本文件中这些以及其它配置项的详情，请参阅Webpack文档。

Refer to the Webpack documentation for details on these and other configuration options in this file.

抓取本指南底部的应用代码，并试一试：

Grab the app code at the end of this guide and try:

npm start

产品环境配置

Production configuration

产品环境下的配置和开发环境下的配置很相似……除了一些关键的改动。

Configuration of a production build resembles development configuration with a few key changes.

var webpack = require('webpack');
var webpackMerge = require('webpack-merge');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var commonConfig = require('./webpack.common.js');
var helpers = require('./helpers');

const ENV = process.env.NODE_ENV = process.env.ENV = 'production';

module.exports = webpackMerge(commonConfig, {
  devtool: 'source-map',

  output: {
    path: helpers.root('dist'),
    publicPath: '/',
    filename: '[name].[hash].js',
    chunkFilename: '[id].[hash].chunk.js'
  },

  plugins: [
    new webpack.NoEmitOnErrorsPlugin(),
    new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618
      mangle: {
        keep_fnames: true
      }
    }),
    new ExtractTextPlugin('[name].[hash].css'),
    new webpack.DefinePlugin({
      'process.env': {
        'ENV': JSON.stringify(ENV)
      }
    }),
    new webpack.LoaderOptionsPlugin({
      htmlLoader: {
        minimize: false // workaround for ng2
      }
    })
  ]
});

我们希望把应用程序及其依赖都部署到一个真实的产品服务器中。 而不希望部署那些只在开发环境下才用得到的依赖。

You'll deploy the application and its dependencies to a real production server. You won't deploy the artifacts needed only in development.

把产品环境的输出包放在dist目录下。

Put the production output bundle files in the dist folder.

Webpack生成的文件名中带有“缓存无效哈希(cache-busting hash)”。 感谢HtmlWebpackPlugin插件，当这些哈希值变化时，我们不用去更新index.html了。

Webpack generates file names with cache-busting hash. Thanks to the HtmlWebpackPlugin, you don't have to update the index.html file when the hash changes.

还有一些别的插件：

There are additional plugins:

• NoEmitOnErrorsPlugin - 如果出错就停止构建。*

  *NoEmitOnErrorsPlugin— stops the build if there is an error.

UglifyJsPlugin - 最小化(minify)生成的包。

*UglifyJsPlugin— minifies the bundles.

• ExtractTextPlugin - 把内嵌的css抽取成外部文件，并为其文件名添加“缓存无效哈希”。

  *ExtractTextPlugin— extracts embedded css as external files, adding cache-busting hash to the filename.

• DefinePlugin - 用来定义环境变量，以便我们在自己的程序中引用它。

  *DefinePlugin— use to define environment variables that you can reference within the application.

• LoaderOptionsPlugins - 为特定的加载器提供选项。

  *LoaderOptionsPlugins— to override options of certain loaders.

感谢DefinePlugin和顶部定义的ENV变量，我们就可以像这样启用Angular的产品模式了：

Thanks to the DefinePlugin and the ENV variable defined at top, you can enable Angular production mode like this:

if (process.env.ENV === 'production') {
  enableProdMode();
}

抓取本指南底部的应用代码，并试一试：

Grab the app code at the end of this guide and try:

npm run build

测试环境配置

Test configuration

我们并不需要使用很多配置项来运行单元测试。 也不需要在开发环境和产品环境下引入的那些加载器和插件。 如果有可能拖慢执行速度，甚至都不需要在单元测试中加载和处理应用全局样式文件，所以我们用一个null加载器来处理所有CSS。

You don't need much configuration to run unit tests. You don't need the loaders and plugins that you declared for your development and production builds. You probably don't need to load and process the application-wide styles files for unit tests and doing so would slow you down; you'll use the null loader for those CSS files.

我们可以把测试环境的配置合并到webpack.common配置中，并且改写不想要或不需要的部分。 但是从一个全新的配置开始可能更简单。

You could merge the test configuration into the webpack.common configuration and override the parts you don't want or need. But it might be simpler to start over with a completely fresh configuration.

var webpack = require('webpack');
var helpers = require('./helpers');

module.exports = {
  devtool: 'inline-source-map',

  resolve: {
    extensions: ['.ts', '.js']
  },

  module: {
    rules: [
      {
        test: /\.ts$/,
        loaders: [
          {
            loader: 'awesome-typescript-loader',
            options: { configFileName: helpers.root('src', 'tsconfig.json') }
          } , 'angular2-template-loader'
        ]
      },
      {
        test: /\.html$/,
        loader: 'html-loader'

      },
      {
        test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
        loader: 'null-loader'
      },
      {
        test: /\.css$/,
        exclude: helpers.root('src', 'app'),
        loader: 'null-loader'
      },
      {
        test: /\.css$/,
        include: helpers.root('src', 'app'),
        loader: 'raw-loader'
      }
    ]
  },

  plugins: [
    new webpack.ContextReplacementPlugin(
      // The (\\|\/) piece accounts for path separators in *nix and Windows
      /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
      helpers.root('./src'), // location of your src
      {} // a map of your routes
    )
  ]
}

重新配置Karma，让它使用webpack来运行这些测试：

Reconfigure Karma to use Webpack to run the tests:

var webpackConfig = require('./webpack.test');

module.exports = function (config) {
  var _config = {
    basePath: '',

    frameworks: ['jasmine'],

    files: [
      {pattern: './config/karma-test-shim.js', watched: false}
    ],

    preprocessors: {
      './config/karma-test-shim.js': ['webpack', 'sourcemap']
    },

    webpack: webpackConfig,

    webpackMiddleware: {
      stats: 'errors-only'
    },

    webpackServer: {
      noInfo: true
    },

    reporters: ['kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: false,
    browsers: ['Chrome'],
    singleRun: true
  };

  config.set(_config);
};

我们不用预编译TypeScript，Webpack随时在内存中转译我们的TypeScript文件，并且把产出的JS直接反馈给Karma。 硬盘上没有任何临时文件。

You don't precompile the TypeScript; Webpack transpiles the Typescript files on the fly, in memory, and feeds the emitted JS directly to Karma. There are no temporary files on disk.

karma-test-shim告诉Karma哪些文件需要预加载，首要的是：带有“测试版提供商”的Angular测试框架是每个应用都希望预加载的。

The karma-test-shim tells Karma what files to pre-load and primes the Angular test framework with test versions of the providers that every app expects to be pre-loaded.

Error.stackTraceLimit = Infinity;

require('core-js/es6');
require('core-js/es7/reflect');

require('zone.js/dist/zone');
require('zone.js/dist/long-stack-trace-zone');
require('zone.js/dist/proxy');
require('zone.js/dist/sync-test');
require('zone.js/dist/jasmine-patch');
require('zone.js/dist/async-test');
require('zone.js/dist/fake-async-test');

var appContext = require.context('../src', true, /\.spec\.ts/);

appContext.keys().forEach(appContext);

var testing = require('@angular/core/testing');
var browser = require('@angular/platform-browser-dynamic/testing');

testing.TestBed.initTestEnvironment(browser.BrowserDynamicTestingModule, browser.platformBrowserDynamicTesting());

注意，我们并没有明确加载这些应用代码。 只是告诉Webpack查找并加载我们的测试文件(文件名以.spec.ts结尾)。 每个规约(spec)文件都导入了所有(也只有)它测试所需的应用源码。 Webpack只加载那些特定的应用文件，而忽略所有其它我们不会测试到的。

Notice that you do not load the application code explicitly. You tell Webpack to find and load the test files (the files ending in .spec.ts). Each spec file imports all—and only—the application source code that it tests. Webpack loads just those specific application files and ignores the other files that you aren't testing.

抓取本指南底部的应用代码，并试一试：

Grab the app code at the end of this guide and try:

npm test

试一试

Trying it out

这里是一个小型应用的全部源码，我们可以用本章中学到的Webpack技术打包它们。

Here is the source code for a small application that bundles with the Webpack techniques covered in this guide.

<!DOCTYPE html>
<html>
  <head>
    <base href="/">
    <title>Angular With Webpack</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app/app.module';
if (process.env.ENV === 'production') {
  enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule);

body {
    background: #0147A7;
    color: #fff;
}

import { Component } from '@angular/core';
import '../assets/css/styles.css';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent { }

<main>
  <h1>Hello from Angular App with Webpack</h1>
  <img src="../assets/images/angular.png">
</main>

main {
  padding: 1em;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  margin-top: 50px;
  display: block;
}

import { TestBed } from '@angular/core/testing';
import { AppComponent } from './app.component';
describe('App', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({ declarations: [AppComponent]});
  });
  it ('should work', () => {
    let fixture = TestBed.createComponent(AppComponent);
    expect(fixture.componentInstance instanceof AppComponent).toBe(true, 'should create AppComponent');
  });
});

import { NgModule } from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
  imports: [
    BrowserModule
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

app.component.html显示了这个可下载的Angular Logo 。 在项目的assets目录下创建一个名叫images的文件夹，然后右键点击（Mac上是Cmd+点击）本图片，并把它下载到images文件夹中。

The app.component.html displays this downloadable Angular logo . Create a folder called images under the project's assets folder, then right-click (Cmd+click on Mac) on the image and download it to that folder.

这里又是TypeScript的入口点文件，它定义了polyfills和vendor这两个包。

Here again are the TypeScript entry-point files that define the polyfills and vendor bundles.

import 'core-js/es6';
import 'core-js/es7/reflect';
require('zone.js/dist/zone');
if (process.env.ENV === 'production') {
  // Production
} else {
  // Development and test
  Error['stackTraceLimit'] = Infinity;
  require('zone.js/dist/long-stack-trace-zone');
}

// Angular
import '@angular/platform-browser';
import '@angular/platform-browser-dynamic';
import '@angular/core';
import '@angular/common';
import '@angular/http';
import '@angular/router';
// RxJS
import 'rxjs';
// Other vendors for example jQuery, Lodash or Bootstrap
// You can import js, ts, css, sass, ...

重点：

Highlights

• 在index.html中没有<script>或<link>标签。 HtmlWebpackPlugin会在运行时动态插入它们。

  There are no <script> or <link> tags in the index.html. The HtmlWebpackPlugin inserts them dynamically at runtime.

• app.component.ts中的AppComponent类简单的用一个import语句导入了应用级css。

  The AppComponent in app.component.ts imports the application-wide css with a simple import statement.

• AppComponent组件本身有它自己的HTML模板和CSS文件。Webpack通过调用require()方法加载它们。Webpack还把那些组件内部的文件打包进了app.js中。 我们在自己的源码中看不到这些调用，这些工作是由幕后的angular2-template-loader插件完成的。

  The AppComponent itself has its own html template and css file. WebPack loads them with calls to require(). Webpack stashes those component-scoped files in the app.js bundle too. You don't see those calls in the source code; they're added behind the scenes by the angular2-template-loader plug-in.

• vendor.ts由import提供商依赖的语句组成，它最终决定了vender.js的内容。 本应用也导入这些模块，如果没有CommonsChunkPlugin插件检测出这种重叠，并且把它们从app.js中移除，它们就会同时出现在app.js包中。

  The vendor.ts consists of vendor dependency import statements that drive the vendor.js bundle. The application imports these modules too; they'd be duplicated in the app.js bundle if the CommonsChunkPlugin hadn't detected the overlap and removed them from app.js.

总结

Conclusion

我们学到了刚好够用来在开发、测试、产品环境下构建一个小型Angular应用的Webpack配置知识。

You've learned just enough Webpack to configurate development, test and production builds for a small Angular application.

但我们还能做得更多。搜索互联网来获得专家的建议，并扩展你对Webpack的认识。

You could always do more. Search the web for expert advice and expand your Webpack knowledge.

回到顶部

Back to top