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 类型定义

Webpack 入门指南 - 3. Hello, Angular2!的更多相关文章

Webpack 入门指南 - 2.模块
这一次我们谈谈模块问题. 通常我们希望这个项目可以分为多个独立的模块,比如,上一次提高的 hello 函数,如果我们定义为一个模块,其它模块引用之后,直接调用就好了.在前端怎么使用模块呢?这可说来话长 ...
Webpack 入门指南 - 1.安装
Webpack 是目前流行的打包工具,如何安装它呢? 1. 安装 Node Js 首先,Webpack 是基于 NodeJs 的工具,你必须首先安装 NodeJs. NodeJs 仅仅只需要在你的系统 ...
一小时包教会 —— webpack 入门指南
什么是 webpack? webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. 我们可以 ...
【一小时入门】webpack 入门指南
什么是 webpack? webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. 我们可以 ...
webpack入门指南（基于webpack v4.41.2）
2019年12月5日初稿,目前webpack已经更新到v4.41.2,本文正是基于该版本,在windows8.1操作系统下进行的demo编译,适用于想入门webpack的前端开发人员. webpack ...
webpack入门指南(转载)
什么是 webpack? webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. 我们可以 ...
webpack 入门指南
很久没有更博了... 这就把最近积累用到的知识点更新到这里.. 望共勉什么是 webpack? webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffe ...
webpack入门指南-step03
一.webpack 的使用 webpack简单点来说就就是一个配置文件,所有的魔力都是在这一个文件中发生的. 这个配置文件主要分为三大块 entry 入口文件让webpack用哪个文件作为项目的入口 ...
webpack入门指南-step04
一.建立项目建一个文件夹,然后新建一个package.json的文件在项目根目录下如果你使用git管理你的这个项目的话,建议你新建一个.gitignore文件,不要让git提交一些node依赖的模 ...

随机推荐

(转)COM组件里的AddRef（）
D3D是 COM组件,它在服务进程中运行,而不在当前的客户进程中.在DX组件运行过程中,要创建一系列接口对象,如CreateDevice()返回接口指针,这些接口及其占用内存什么时候释放,要通过“引用 ...
serialVersionUID的作用
Java的序列化机制是通过在运行时判断类的serialVersionUID来验证版本一致性的.在进行反序列化时,JVM会把传来的字节流中的serialVersionUID与本地相应实体(类)的seri ...
自定义ANDROID中EDITTEXT中的HINT文本的大小
EditText editText = (EditText) rootView.findViewById(R.id.et); // 新建一个可以添加属性的文本对象 SpannableString ss ...
Joomla及其类似软件的说明分析
Joomla不单单是一款免费的软件,还是在国外相当知名的及内容管理.web开发及手机应用开发等为一体的一套系统.Joomla是使用PHP语言加上MySQL数据库所开发的软件系统,可以在Linux. W ...
我是如何社工TDbank获取朋友隐私的
原创 ziwen@beebeeto 转载请保留本行个人感觉国外的安全方面对社工的了解和防范并不是很好即使他们使用社工的时间比我们要长很多比如他们的visa在pos机上使用是不需要密码的而且 ...
Java中类的数据成员的初始化顺序
对于单一类: 属性初始化 ---> 按顺序执行静态初始化块(只能操作静态属性) ---> 按顺序执行初始化块 ---> 构造方法对于存在继承关系的类: 父类属性初始化 ---> ...
js中遍历对象的属性和值
今天想看一下js的数组遍历的内容,搜索到了一个关于对象遍历写好的函数,保留一下.以后好用. function allPrpos ( obj ) { // 用来保存所有的属性名称和值 var p ...
HDU 5970 最大公约数
中文题题意: 思路: 1.观察可得模m的同余系和m的gcd都相同(这题多了一个c也是相同的) 2.由于取证所以不能用简单的用O(m^2)的做法,涉及到多1少1的 3.打表观察,例如i为模9为7的数 ...
C# WebApi 请求方式Post，返回Response
1.[FromBody]属性只能用在一个参数上,当Body中有多个参数要定义类型.一个参数的时候 key="",value="123",key为空才能取到值. ...
WebAPI学习点滴(一)
对于GET请求,如果方法名不是以Get开头,就必须加上[HttpGet]标签,不然无法找到该方法,如果是以Get开头则没有这个问题. 因此,推荐所有方法都确定访问方式,加上标签. [HttpGet] ...

Webpack 入门指南 - 3. Hello, Angular2!