目录结构：

angular-quickstart

　　|_ ts

　　　　|_ app.ts

　　　　|_ index.ts

　　|_ index.html

　　|_ package.json

　　|_ tsconfig.json

　　|_ webpack.config.js

1. angular-quickstart/package.json

{

  "name": "angular-quickstart",

  "version": "1.0.0",

  "description": "I will show you how to set up angular2 development angular-quickstart",

  "keywords": [

    "angular2",

    "angular-quickstart"

  ],

  "scripts": {

    "start": "webpack-dev-server --devtool eval-source-map --progress --colors --hot --inline --watch --content-base",

    "build": "webpack --progress --colors",

    "dev": "webpack-dev-server"

  },

  "author": "Lin.keqing",

  "license": "MIT",

  "dependencies": {

    "@angular/common": "^2.4.5",

    "@angular/compiler": "^2.4.5",

    "@angular/core": "^2.4.5",

    "@angular/platform-browser": "^2.4.5",

    "@angular/platform-browser-dynamic": "^2.4.5",

    "@angular/forms": "^2.4.5",

    "core-js": "^2.4.1",

    "rxjs": "5.0.3",

    "zone.js": "^0.7.6"

  },

  "devDependencies": {

    "@types/core-js": "^0.9.35",

    "ts-loader": "^2.0.0",

    "typescript": "^2.1.5",

    "webpack": "^2.2.0",

    "webpack-dev-server": "^2.2.0"

  }

}

2. angular-quickstart/tsconfig.json

{

    "compilerOptions": {

        "module": "commonjs",

        "target": "es5",

        "moduleResolution": "node",

        "noImplicitAny": true,

        "removeComments": true,

        "emitDecoratorMetadata": true,

        "experimentalDecorators": true,

        "sourceMap": true,

        "declaration": false

    },

    "buildOnSave": false,

    "compileOnSave": false,

    "exclude": [

        "node_modules"

    ]

}

3. angular-quickstart/webpack.config.js

const {resolve} = require('path');

module.exports = {

    entry: {

        index: './ts/index.ts'

    },

    output: {

        path: resolve(__dirname, 'dist'),

        filename: 'bundle.js',

        publicPath: 'dist/'

    },

    module: {

        exprContextCritical: false,

        rules: [

            {

                test: /\.ts$/,

                use: ['ts-loader']

            }

        ]

    },

    resolve: {

        extensions: [

            '.js',

            '.ts'

        ]

    }

};

运行npm install

4. angular-quickstart/index.html

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>environment</title>

    </head>

    <body>

        <!--这里引用我们的第一个component-->

        <my-app></my-app>

        <!--加载使用webpack编译后的bundle-->

        <script type="text/javascript" src="/dist/bundle.js"></script>

    </body>

</html>

5. angular-quickstart/ts/app.ts

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

//声明第一个Component

@Component({

    selector: 'my-app',

    template: '<h1>My First Angular 2 AppApple</h1>'

})

export class AppComponent { }

6. angular-quickstart/ts/index.ts

//不显示引入，你会得到"Uncaught reflect-metadata shim is required when using class decorators"的错误

import 'core-js/es6';

import 'core-js/es7/reflect';

import 'zone.js/dist/zone';

//引入NgModule装饰器

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

//引入浏览器模块

import { BrowserModule } from '@angular/platform-browser';

//引入启动器

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

//引入我们刚才创建的第一个component

import { AppComponent }  from './app';

//声明一个应用模块

@NgModule({

  imports:      [ BrowserModule ],

  declarations: [ AppComponent ],

  bootstrap:    [ AppComponent ]

})

class AppModule { }

//启动应用

platformBrowserDynamic().bootstrapModule(AppModule);

运行 npm start

完。

一个下下来就可以用的环境：

https://github.com/angular/quickstart

配套的学习地址：

http://angular2.axuer.com/docs/ts/latest/guide/learning-angular.html

angular2 基于webpack环境搭建的更多相关文章

  1. webpack 环境搭建

    Webpack环境搭建 一.安装node 1.node官网下载node并安装----node里面内置了npm所以用在安装npm了 2.命令行输入node -v查看node是否安装成功 二.全局安装we ...

  2. TypeScript + Webpack 环境搭建

    TypeScript + Webpack 环境搭建步骤 安装Node.js 安装npm 创建一个npm项目 安装typescript,配置ts 安装webpack,配置webpack 初始化一个npm ...

  3. 基于 Webpack 4 搭建 Vue 开发环境

    自从工作之后,就已经很久没有写过博客了.时间被分割得比较碎,积累了一段时间的学习成果,才写下了这篇博客. 之前有写过 Webpack4 的文章,但是都比较偏入门,唯一的一篇实战篇 -- 基于Webpa ...

  4. Android开发之基于AndroidStudio环境搭建和工程创建

    断断续续的学习安卓也有一段时间了.因为之前是搞iOS开发的, 之前有关iOS的博客请看<我的iOS开发系列博文>.<我的Objective-C系列文章>和<窥探Swift ...

  5. webpack环境搭建

    环境搭建参考:Webpack+vue+element逐步搭建开发环境 webpack入门:http://www.jianshu.com/p/42e11515c10f ----------------- ...

  6. react+es6+webpack环境搭建以及项目入门

    前言:拖了这么久,小菜鸟终于开始正式应用react,和es6来开发项目了.之前超喜欢同学的一个博客风格,这里贴一下地址:https://iwenku.net/,PC端是他很久之前做的,最近他重新做了一 ...

  7. webpack环境搭建开发环境，JavaScript面向对象的详解，UML类图的使用

    PS:因为所有的设计模式都是基于面向对象来完成的,所以在讲解设计模式之前先来过一下面向对象都有哪些知识点 搭建开发环境 初始化npm环境 下载安装nodejs安装即可,nodejs自带npm管理包,然 ...

  8. node+webpack环境搭建 vue.js 2.0 基础学习笔记

    npm install -g vue //全局安装vue npm install -g webpack //全局安装webpack npm install -g vue-cli //全局安装vue-c ...

  9. 基于ruby环境搭建Redmine

    环境说明 系统版本    CentOS 6.9 x86_64 软件版本    ruby 2.4.4 rails 4.2 redmine-3.4.5 Redmine是一个开源的.基于Web的项目管理和缺 ...

随机推荐

  1. apache之访问本地文件，绑定域名

    1.打开文件 C:\Windows\System32\drivers\etc\hosts,在文件末尾加上下面代码: 127.0.0.1 www.wangdongxue.com 2.打开Apache的配 ...

  2. Cache系列：spring-cache简单三步快速应用ehcache3.x-jcache缓存（spring4.x）

    前言:本项目基于spring4.x构建,使用ehcache3.5.2和JCache(jsr107规范) 一.依赖 除了ehcache和cache-api外,注意引用spring-context-sup ...

  3. python爬虫知识点总结（九）Requests+正则表达式爬取猫眼电影

    一.爬取流程 二.代码演示 #-*- coding: UTF-8 -*- #_author:AlexCthon #mail:alexcthon@163.com #date:2018/8/3 impor ...

  4. IHE-PIX 备注

    IHE给出了各个Actor之间如何通讯的建议: 1.       应用程序通讯时必须用MLLP包装或者解析. 2.       客户端建立连接后,服务器端必须用此连接进行应答.客户端可以继续用此连接启 ...

  5. Spring管理Filter和Servlet（在servlet中注入spring容器中的bean）

    在使用spring容器的web应用中,业务对象间的依赖关系都可以用context.xml文件来配置,并且由spring容器来负责依赖对象 的创建.如果要在servlet中使用spring容器管理业务对 ...

  6. AI-Info-Micron-Insight：案例分析：美光使用数据和人工智能来发现、倾听和感觉

    ylbtech-AI-Info-Micron-Insight:案例分析:美光使用数据和人工智能来发现.倾听和感觉 1.返回顶部 1. 案例分析:美光使用数据和人工智能来发现.倾听和感觉 内存芯片制造商 ...

  7. SELinux处理命令

    1 查看SELinux状态 Enforcing为开启状态:Disabled为关闭状态. [root@localhost /]# getenforce Enforcing 2 临时关闭SELinux [ ...

  8. JavaScript高级程序设计学习笔记第十一章--DOM扩展

    1.对 DOM 的两个主要的扩展是 Selectors API(选择符 API)和 HTML5 2.Selectors API Level 1 的核心是两个方法: querySelector()和 q ...

  9. Linux&nbsp;下安装配置&nbsp;JDK7（2）

    Linux 下安装配置 JDK7 自从从Oracle收购Sun近三年来,已经有很多变化.早在8月,甲骨文将"Operating System Distributor License for ...

  10. POJ - 2955 Brackets括号匹配（区间dp）

    Brackets We give the following inductive definition of a “regular brackets” sequence: the empty sequ ...