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模块(包)。

{
  "name": "angular-quickstart",
  "version": "1.0.0",
  "description": "Len'First App",
  "scripts": {
    "prebuild": "npm run clean",    
    "build": "webpack --progress --watch",
    "start": "lite-server -c=bs-config.json",
    "serve": "webpack-dev-server -d",
    "lint": "tslint ./src/**/*.ts -t verbose",
    "clean": "rimraf build"
  },
  "keywords": [],
  "homePage": "",
  "config": { "port" : "8080" },
  "author": "Len",
  "license": "MIT",
  "dependencies": {
    "@angular/common": "~4.3.4",
    "@angular/compiler": "~4.3.4",
    "@angular/core": "~4.3.4",
    "@angular/forms": "~4.3.4",
    "@angular/http": "~4.3.4",
    "@angular/platform-browser": "~4.3.4",
    "@angular/platform-browser-dynamic": "~4.3.4",
    "@angular/router": "~4.3.4",
    "angular-in-memory-web-api": "~0.3.0",
    "core-js": "^2.4.1",
    "fork-ts-checker-webpack-plugin": "^0.4.1",
    "rxjs": "5.0.1",
    "systemjs": "0.19.40",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@types/jasmine": "2.5.36",
    "@types/node": "^6.0.46",
    "canonical-path": "0.0.2",
    "clean-webpack-plugin": "^0.1.19",
    "concurrently": "^3.2.0",
    "copy-webpack-plugin": "^4.5.1",
    "css-loader": "^0.28.11",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^3.2.0",
    "install": "^0.11.0",
    "jasmine-core": "~2.4.1",
    "karma": "^1.3.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "lite-server": "^2.2.2",
    "lodash": "^4.16.4",
    "protractor": "~4.0.14",
    "rimraf": "^2.5.4",
    "style-loader": "^0.21.0",
    "ts-loader": "^4.2.0",
    "tsconfig-paths-webpack-plugin": "^3.0.4",
    "tslint": "^3.15.1",
    "typescript": "latest",
    "url-loader": "^1.0.1",
    "webpack": "^4.6.0",
    "webpack-cli": "^2.0.15",
    "webpack-dev-server": "^3.1.3"
  },
  "repository": "git@github.com:len007/my-angular2-app.git"
}

 

其中：

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文件。

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
    mode: "development",
    devtool: "inline-source-map",
    entry: "./src/main.ts",
    output: {
        path: path.resolve(__dirname ,'build'),
        filename: "[name].bundle.js"
    },
    devServer: {
        contentBase: path.join(__dirname, ""),
        compress: true,
        stats: "errors-only",
        openPage: "",
        port:9000,
        open:true
      },
    resolve: {
      extensions: [".ts", ".tsx", ".js"],
    },
    module: {
      rules: [
        { 
            test: /\.tsx?$/, 
            use:["ts-loader"],
            exclude: [
                path.resolve(__dirname ,'node_modules')
            ]
      
        },
        {
            test: /(\.jsx|\.js)$/,
            use: {
                loader: "babel-loader"
            },
            exclude: /node_modules/
        },{
            test: /\.css$/,
            use: ExtractTextPlugin.extract({
                fallback: "style-loader",
                use: [{
                    loader: "css-loader",
                    options: {
                        modules: true,
                        localIdentName: '[name]__[local]--[hash:base64:5]'
                    }
                }, {
                    loader: "postcss-loader"
                }],
            })
        }

      ]
    }
  };

 

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配套使用的命令。

 至此，我们的简单应用就成型了!