Webpack 入门指南 - 1.安装
Webpack 入门指南 - 2.模块
这一次，我们使用 Webpack 来打包 Angular 2 的应用。
与官方的 Hello, Angular 2 项目相比，我们不使用 System.js，而是使用 TypeScript 直接编译，然后使用 Webpack 打包生成代码。
1. 下载 Angular 2 以及依赖包
修改我们的 package.json 文件，添加 Angular 2 涉及的包，和 Angular 2 所依赖的包，以后，我们可以慢慢介绍各个包的用途，这个文件也可以保存起来，以后直接使用。
{ "name": "w1", "version": "1.0.0", "description": "", "main": "index.js", "dependencies": { "@angular/common": "~2.1.1", "@angular/compiler": "~2.1.1", "@angular/core": "~2.1.1", "@angular/forms": "~2.1.1", "@angular/http": "~2.1.1", "@angular/platform-browser": "~2.1.1", "@angular/platform-browser-dynamic": "~2.1.1", "@angular/router": "~3.1.1", "angular-in-memory-web-api": "~0.1.13", "core-js": "^2.4.1", "reflect-metadata": "^0.1.8", "rxjs": "5.0.0-beta.12", "zone.js": "^0.6.26", "ie-shim": "^0.1.0" }, "devDependencies": { "html-webpack-plugin": "^2.24.0", "ts-loader": "^0.9.5", "typescript": "^2.0.3", "webpack": "^1.13.2" }, "scripts": { "test": "echo "Error: no test specified" && exit 1" }, "keywords": [], "author": "", "license": "ISC" }
黄色是新添加的包，我们可以自己编辑一个应用寄宿的网页，所以，这里将自动生成网页的插件删掉了。
打开控制台窗口，执行 npm install 将这些包安装到你的本地。
2. 修改 tsconfig.json
为 TypeScript 的配置文件 tsconfig.json 再添加两行，以便支持 decorator，这是一个 JavaScript 的新特性，Angular 2 到处使用这个特性。修改之后的文件内容如下。
{ "compilerOptions": { "target": "es5", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true }, "exclude": [ "node_modules" ] }
3. 创建应用寄宿的网页
这次，我们直接编辑寄宿的网页，而不是自动生成。这是因为我们希望网页中能够添加一段为 Angular 2 应用演出的舞台。
<!DOCTYPE html> <html> <head> <meta charset=UTF-8> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Hello, Angular2</title> </head> <body> <my-app> Loading... </my-app> <script src="./bundle.js"></script> </body> </html>
就是 my-app 标记的一段，在 Angular 2 中，我们可以自定义标记了，这个 my-app 就是我们应用以后表演的舞台了。
脚本的一段更加简单，就是直接引用我们将要生成的脚本。
4. 创建第一个 Angular 2 组件
在 Angular 2 中，UI 的基本单位称为组件 Component，一个组件映射到一个自定义的标记上，我们可以自己来定义这个标记实际的内容。
在项目的根目录下创建名为 AppComponent.ts 的文件，内容如下。
import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: '<h1>My First Angular App</h1>' }) export class AppComponent { }
@Component 就是声明说我们要定义一个组件了，selector 定义了以后我们如何来使用这个组件，我们在网页中使用的 my-app 标记就来自这里。template 就是在运行的时候，这个 my-app 实际上显示为这个模板的内容。这里就是一个一号的大标题。
5. 定义 Module
Angular 2 定义个一个模块的概念，相关的组件可以封装为一个组件，概念我们以后慢慢学，这里先来一个看看。
在项目根目录下，创建名为 app.module.ts 的文件，内容如下。
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './AppComponent ';
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
它就是将刚刚定义的 AppComponent 封装到一个 Module 中，注意其中的 bootstrap，是说通过这个组件启动的化，会从 AppComponent 开始。可以理解为第一个界面。
6. 引导应用
要想启动应用，Angular 2 提供了加载器。创建名为 app.ts 的文件，作为我们应用的启动文件。这里使用 Angular 2 提供的浏览器加载器来加载我们的启动模块。
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule( AppModule );
其实程序的基本结构就已经创建了。
但是，还有一个基本的文件需要解决。
在 Angular 2 中，底层依赖了许多基础技术，比如说 ES6 的许多技术，这些当前的 JavaScript 都不支持的，Angular 2 使用 core-js 提供了支持，另外还有 zone.js 等等库的支持。为了提前加载这些依赖库，我们需要创建一个名为 polyfills.browser.ts 的文件来加载这些库，这个文件一般都不需要经常修改。
// Polyfills import 'ie-shim'; // Internet Explorer 9 support // import 'core-js/es6'; // Added parts of es6 which are necessary for your project or your browser support requirements. import 'core-js/es6/symbol'; import 'core-js/es6/object'; import 'core-js/es6/function'; import 'core-js/es6/parse-int'; import 'core-js/es6/parse-float'; import 'core-js/es6/number'; import 'core-js/es6/math'; import 'core-js/es6/string'; import 'core-js/es6/date'; import 'core-js/es6/array'; import 'core-js/es6/regexp'; import 'core-js/es6/map'; import 'core-js/es6/set'; import 'core-js/es6/weak-map'; import 'core-js/es6/weak-set'; import 'core-js/es6/typed'; import 'core-js/es6/reflect'; // see issue https://github.com/AngularClass/angular2-webpack-starter/issues/709 // import 'core-js/es6/promise'; import 'core-js/es7/reflect'; import 'zone.js/dist/zone'; import 'zone.js/dist/long-stack-trace-zone';
最后，我们希望 Webpack 先引入这个 polyfills，然后引导 Angular 2 应用，所以，我们可以再创建一个 index.ts 来完成这个任务。内容非常简单。
import "./polyfills.browser";
import "./app";
7. 使用 Webpack 打包
最后，我们只需要告诉 webpack 从这个 index.ts 开始进行打包就可以了，webpack 可以根据这个文件中 import 导入的模块来找到其它相关的模块，直到找到所有的模块，然后进行编译，打包，最后输出到 bundle.js 就可以了。这次没有使用自动生成网页，实际上，文件更短了，
var HtmlwebpackPlugin = require('html-webpack-plugin'); module.exports = { // 入口 entry: "./index.ts", // 输出的文件名 output: { filename: 'bundle.js' }, resolve: { // Add `.ts` and `.tsx` as a resolvable extension. extensions: ['', '.ts', '.js'] }, module: { loaders: [ // all files with a `.ts` extension will be handled by `ts-loader` { test: /.ts$/, loader: 'ts-loader' } ] } };
8. 打包和运行
如果你已经完成了前面的步骤，打开控制台创建，直接执行 webpack 命令，就会自动生成一个新的 bundle.js 文件了。
启动你的浏览器，直接打开 index.html 网页，应该就可以看到你的第一个 Angular 2 界面了。