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 界面了。