webpack+angular2开发环境搭建

升级版之webpack4 + angular5脚手架demo详见: http://www.cnblogs.com/xudengwei/p/8852257.html

刚搭建完一个webpack+angular2环境，由于angular及webpack官网上没有一个折中的搭建方案，所以只能摸索着搭建，中间遇到一些坑，遂总结记录下来，以供交流。

搭建完后的项目初步环境如下：

app
----app.component.ts
----app.module.ts
----main.ts
index.html
package.json
tsconfig.json
webpack.config.js

app.componnet.ts：组件文件。angular2应用是由组件构成，组件控制视图；

 import { Component } from '@angular/core';
 @Component({
   selector: 'my-app',
   template: `
     <h1>{{title}}</h1>
     <h2>My favorite hero is: {{myHero}}</h2>
     `
 })
 // 使用变量初始化方式
 export class AppComponent {
   title = 'Tour of Heroes';
   myHero = 'Windstorm';
 }

app.module.ts：应用跟模块。angular是模块化，拥有自己的模块系统，被称为angular模块或NgModules（深入了解）；

 //缺少下述模块引入，会输出"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';
 //引入创建的component
 import { AppComponent }  from './app.component';

 @NgModule({
   imports:      [ BrowserModule ],
   declarations: [ AppComponent ],
   bootstrap:    [ AppComponent ]
 })
 export class AppModule { }

main.ts：用于引导跟模块启动应用；

 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { AppModule }              from './app.module';
 //引导跟模块启动应用
 platformBrowserDynamic().bootstrapModule(AppModule);

index.html：angular应用宿主页面；

 <!DOCTYPE HTML>
 <html lang="zh-CN">
 <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width" />
     <title>small胖的博客</title>
 </head>
 <body>
     <my-app></my-app>
     <script src="dist/bundle.js"></script>
 </body>
 </html>

package.json：一个标准化的npm说明文件，其中包含诸如当前应用的依赖包、自定义的脚本命令等，在cmd终端可用npm init自动创建该文件；

注意，此处如果引入的angular模块版本是2.4.X，则会报错“Angular2 + Jspm.io : reflect-metadata shim is required when using class decorators”，产生此坑的具体原因尚不清楚，希望有朋友一起交流。

 {
   "name": "blogcode",
   "version": "1.0.0",
   "description": "",
   "main": "webpack.config.js",
   "dependencies": {
     "ts-loader": "2.0.0",
     "@angular/common": "2.1.2",
     "@angular/compiler": "2.1.2",
     "@angular/core": "2.1.2",
     "@angular/platform-browser": "2.1.2",
     "@angular/platform-browser-dynamic":"2.1.2",
     "rxjs": "5.0.0-beta.12",
     "zone.js": "0.6.26",
     "core-js": "^2.4.1"
   },
   "devDependencies": {
     "webpack": "^2.2.1",
     "@types/core-js": "^0.9.35",
     "typescript": "^2.1.5",
     "webpack": "^2.2.0",
     "webpack-dev-server": "^2.3.0"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
     "type": "git",
     "url": "https://git.coding.net/frankshin/xudengwei.git"
   },
   "author": "",
   "license": "ISC"
 }

tsconfig.json：用于定义typescript编译成ES5的各项参数；

 {
     "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"
     ]
 }

webpack.config.js：一个标准化的commonjs文件，用于配置webpack编译打包的参数。

 module.exports = {
     entry: "./app/main.ts",
     output: {
         path: __dirname + '/dist',
         filename: "bundle.js"
     },
     module: {
    rules: [
         {
           test: /\.tsx?$/,
           loader: 'ts-loader',
           exclude: /node_modules/,
         },
     ]
    },
    resolve: {
       extensions: [".tsx", ".ts", ".js"]
    }
 };