1需要具备的基本前端基础：HTML、CSS、JavaScript。为了实现对项目包的管理，推荐使用npm
NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题；官网先下载node.js并安装
2.clone快速新建Angular项目的仓库到本地文件夹my-angular2-app。
git clone git@github.com:len007/my-angular2-app.git my-angular2-app
3.创建package.json文件，用于管理本地安装的npm模块(包)。
1 { 2 "name": "angular-quickstart", 3 "version": "1.0.0", 4 "description": "Len'First App", 5 "scripts": { 6 "prebuild": "npm run clean", 7 "build": "webpack --progress --watch", 8 "start": "lite-server -c=bs-config.json", 9 "serve": "webpack-dev-server -d",10 "lint": "tslint ./src/**/*.ts -t verbose",11 "clean": "rimraf build"12 },13 "keywords": [],14 "homePage": "",15 "config": { "port" : "8080" },16 "author": "Len",17 "license": "MIT",18 "dependencies": {19 "@angular/common": "~4.3.4",20 "@angular/compiler": "~4.3.4",21 "@angular/core": "~4.3.4",22 "@angular/forms": "~4.3.4",23 "@angular/http": "~4.3.4",24 "@angular/platform-browser": "~4.3.4",25 "@angular/platform-browser-dynamic": "~4.3.4",26 "@angular/router": "~4.3.4",27 "angular-in-memory-web-api": "~0.3.0",28 "core-js": "^2.4.1",29 "fork-ts-checker-webpack-plugin": "^0.4.1",30 "rxjs": "5.0.1",31 "systemjs": "0.19.40",32 "zone.js": "^0.8.4"33 },34 "devDependencies": {35 "@types/jasmine": "2.5.36",36 "@types/node": "^6.0.46",37 "canonical-path": "0.0.2",38 "clean-webpack-plugin": "^0.1.19",39 "concurrently": "^3.2.0",40 "copy-webpack-plugin": "^4.5.1",41 "css-loader": "^0.28.11",42 "extract-text-webpack-plugin": "^3.0.2",43 "file-loader": "^1.1.11",44 "html-webpack-plugin": "^3.2.0",45 "install": "^0.11.0",46 "jasmine-core": "~2.4.1",47 "karma": "^1.3.0",48 "karma-chrome-launcher": "^2.0.0",49 "karma-cli": "^1.0.1",50 "karma-jasmine": "^1.0.2",51 "karma-jasmine-html-reporter": "^0.2.2",52 "lite-server": "^2.2.2",53 "lodash": "^4.16.4",54 "protractor": "~4.0.14",55 "rimraf": "^2.5.4",56 "style-loader": "^0.21.0",57 "ts-loader": "^4.2.0",58 "tsconfig-paths-webpack-plugin": "^3.0.4",59 "tslint": "^3.15.1",60 "typescript": "latest",61 "url-loader": "^1.0.1",62 "webpack": "^4.6.0",63 "webpack-cli": "^2.0.15",64 "webpack-dev-server": "^3.1.3"65 },66 "repository": "git@github.com:len007/my-angular2-app.git"67 }
其中：
name： 项目名称version： 项目版本号description： 项目描述keywords：{Array}关键字，便于用户搜索到我们的项目homepage：项目URL主页bugs：项目问题反馈的URL或Email配置，如： { "url" : "https://github.com/owner/project/issues", "email": "project@hostname.com" }license：项目许可证，让使用者知道是如何被允许使用此项目。author,contributors：作者和贡献者scripts：声明一系列npm脚本指令 prepublish: 在包发布之前运行，也会在npm install安装到本地时运行 publish,postpublish: 包被发布之后运行 preinstall: 包被安装前运行 install,postinstall: 包被安装后运行 preuninstall,uninstall: 包被卸载前运行 postuninstall: 包被卸载后运行 preversion: bump包版本前运行 postversion: bump包版本后运行 pretest,test,posttest: 通过npm test命令运行 prestop,stop,poststop: 通过npm stop命令运行 prestart,start,poststart: 通过npm start命令运行 prerestart,restart,postrestart: 通过npm restart运行config： { "port" : "8080" }，配置项目中需要的配置参数dependencies：项目在生产环境中依赖的包devDependencied：项目在开发和测试环境中依赖的包
4.Install所需的包
npm install
5.创建webpack.json文件。
1 const path = require('path'); 2 const webpack = require('webpack'); 3 const HtmlWebpackPlugin = require('html-webpack-plugin'); 4 const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin'); 5 const ExtractTextPlugin = require('extract-text-webpack-plugin'); 6 const CopyWebpackPlugin = require('copy-webpack-plugin'); 7 8 module.exports = { 9 mode: "development",10 devtool: "inline-source-map",11 entry: "./src/main.ts",12 output: {13 path: path.resolve(__dirname ,'build'),14 filename: "[name].bundle.js"15 },16 devServer: {17 contentBase: path.join(__dirname, ""),18 compress: true,19 stats: "errors-only",20 openPage: "",21 port:9000,22 open:true23 },24 resolve: {25 extensions: [".ts", ".tsx", ".js"],26 },27 module: {28 rules: [29 { 30 test: /\.tsx?$/, 31 use:["ts-loader"],32 exclude: [33 path.resolve(__dirname ,'node_modules')34 ]35 36 },37 {38 test: /(\.jsx|\.js)$/,39 use: {40 loader: "babel-loader"41 },42 exclude: /node_modules/43 },{44 test: /\.css$/,45 use: ExtractTextPlugin.extract({46 fallback: "style-loader",47 use: [{48 loader: "css-loader",49 options: {50 modules: true,51 localIdentName: '[name]__[local]--[hash:base64:5]'52 }53 }, {54 loader: "postcss-loader"55 }],56 })57 }58 59 ]60 }61 };
5.webpack打包编译，由配置可看出编译之前会先删除build文件夹。
npm run build
6.这里我们可以使用两种方式启动本地浏览器来显示咱们的应用
npm start( lite-server -c=bs-config.json )
或
npm run serve( webpack-dev-server -d )
webpack-dev-server是与webpack配套使用的命令。
至此，我们的简单应用就成型了!