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 界面了。
在 Typescript 2.0 中使用 @types 類型定義