升级版之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应用是由组件构成，组件控制视图；
1 import { Component } from '@angular/core'; 2 @Component({ 3 selector: 'my-app', 4 template: ` 5 <h1>{{title}}</h1> 6 <h2>My favorite hero is: {{myHero}}</h2> 7 ` 8 }) 9 // 使用变量初始化方式 10 export class AppComponent { 11 title = 'Tour of Heroes'; 12 myHero = 'Windstorm'; 13 }
app.module.ts：应用跟模块。angular是模块化，拥有自己的模块系统，被称为angular模块或NgModules（深入了解）；
1 //缺少下述模块引入，会输出"Uncaught reflect-metadata shim is required when using class decorators"的错误 2 import 'core-js/es6'; 3 import 'core-js/es7/reflect'; 4 import 'zone.js/dist/zone'; 5 //引入NgModule装饰器 6 import { NgModule } from '@angular/core'; 7 //引入浏览器模块 8 import { BrowserModule } from '@angular/platform-browser'; 9 //引入创建的component 10 import { AppComponent } from './app.component'; 11 12 13 @NgModule({ 14 imports: [ BrowserModule ], 15 declarations: [ AppComponent ], 16 bootstrap: [ AppComponent ] 17 }) 18 export class AppModule { }
main.ts：用于引导跟模块启动应用；
1 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 2 import { AppModule } from './app.module'; 3 //引导跟模块启动应用 4 platformBrowserDynamic().bootstrapModule(AppModule);
index.html：angular应用宿主页面；
1 <!DOCTYPE HTML> 2 <html lang="zh-CN"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta name="viewport" content="width=device-width" /> 6 <title>small胖的博客</title> 7 </head> 8 <body> 9 <my-app></my-app> 10 <script src="dist/bundle.js"></script> 11 </body> 12 </html>
package.json：一个标准化的npm说明文件，其中包含诸如当前应用的依赖包、自定义的脚本命令等，在cmd终端可用npm init自动创建该文件；
注意，此处如果引入的angular模块版本是2.4.X，则会报错“Angular2 + Jspm.io : reflect-metadata shim is required when using class decorators”，产生此坑的具体原因尚不清楚，希望有朋友一起交流。
1 { 2 "name": "blogcode", 3 "version": "1.0.0", 4 "description": "", 5 "main": "webpack.config.js", 6 "dependencies": { 7 "ts-loader": "2.0.0", 8 "@angular/common": "2.1.2", 9 "@angular/compiler": "2.1.2", 10 "@angular/core": "2.1.2", 11 "@angular/platform-browser": "2.1.2", 12 "@angular/platform-browser-dynamic":"2.1.2", 13 "rxjs": "5.0.0-beta.12", 14 "zone.js": "0.6.26", 15 "core-js": "^2.4.1" 16 }, 17 "devDependencies": { 18 "webpack": "^2.2.1", 19 "@types/core-js": "^0.9.35", 20 "typescript": "^2.1.5", 21 "webpack": "^2.2.0", 22 "webpack-dev-server": "^2.3.0" 23 }, 24 "scripts": { 25 "test": "echo \"Error: no test specified\" && exit 1" 26 }, 27 "repository": { 28 "type": "git", 29 "url": "https://git.coding.net/frankshin/xudengwei.git" 30 }, 31 "author": "", 32 "license": "ISC" 33 }
tsconfig.json：用于定义typescript编译成ES5的各项参数；
1 { 2 "compilerOptions": { 3 "module": "commonjs", 4 "target": "es5", 5 "moduleResolution": "node", 6 "noImplicitAny": true, 7 "removeComments": true, 8 "emitDecoratorMetadata": true, 9 "experimentalDecorators": true, 10 "sourceMap": true, 11 "declaration": false 12 }, 13 "buildOnSave": false, 14 "compileOnSave": false, 15 "exclude": [ 16 "node_modules" 17 ] 18 }
webpack.config.js：一个标准化的commonjs文件，用于配置webpack编译打包的参数。
1 module.exports = { 2 entry: "./app/main.ts", 3 output: { 4 path: __dirname + '/dist', 5 filename: "bundle.js" 6 }, 7 module: { 8 rules: [ 9 { 10 test: /\.tsx?$/, 11 loader: 'ts-loader', 12 exclude: /node_modules/, 13 }, 14 ] 15 }, 16 resolve: { 17 extensions: [".tsx", ".ts", ".js"] 18 } 19 };