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:true 23 }, 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配套使用的命令。
至此，我们的简单应用就成型了!