升級版之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 };