概述
ng2英雄指南相關(guān)問題 這篇記錄的是在實(shí)操 英雄指南過程中遇到的問題以及解決方法，后來在社區(qū)中詢問 【雪狼】， 實(shí)際開發(fā)ng過程中一般使用哪種成熟打包配置工具盼砍，被告知可以使用 webpack, Angular-CLI。 經(jīng)過查看幾個(gè)github ng2入門項(xiàng)目，確實(shí)是用webpack打包鲜漩。所以，就倒騰 如何在 英雄指南中使用webapck集惋， 官方使用的是SystemJS宇整。
如有對(duì)webpack不清楚的，強(qiáng)烈建議參考 中文官方文檔 WEBPACK簡(jiǎn)介 或者按照我的例子實(shí)操下 Angular2開發(fā)基礎(chǔ)之Webpack
完整代碼 -> ng2-tour-of-heroes項(xiàng)目
webpack打包 英雄指南
Angular2開發(fā)基礎(chǔ)之Webpack講解了如何配置基本的webpack.config.js芋膘， 然而鳞青，在【英雄指南】完成到最后霸饲，內(nèi)容繁多，ts, css, html各種文件臂拓，如何把css厚脉， html等文件也打包進(jìn)入webpack中呢？ 這就需要新的配置了胶惰。
package.json
相比之前的package.json, 內(nèi)容有很大變化傻工。
"scripts": {
"build": "webpack --progress",
"build:prod": "webpack -p --progress",
"postinstall": "typings install",
"server": "webpack-dev-server --inline --progress"
}
刪除 "dependencies": 中的systemjs相關(guān)內(nèi)容, "devDependencies"中添加新依賴庫
"devDependencies": {
"angular2-template-loader": "^0.4.0",
"awesome-typescript-loader": "^2.2.4",
"css-loader": "^0.23.1",
"extract-text-webpack-plugin": "^1.0.1",
"html-loader": "^0.4.3",
"raw-loader": "^0.5.1",
"style-loader": "^0.13.1",
"html-webpack-plugin": "^2.24.1",
"ts-loader": "^0.9.5",
"typescript": "^2.0.3",
"typings": "^1.4.0",
"webpack": "^1.13.3",
"webpack-dev-server": "^1.16.2"
}
安裝依賴庫
npm install
目錄更新
原本的英雄指南目錄是在一個(gè)app目錄中的，但是要稍微區(qū)分下孵滞，修改后的目錄結(jié)構(gòu)如下：
其中app目錄包含了【英雄指南】中的所ts中捆， css， html文件坊饶。
webpack.config.js
千呼萬喚才出來-webpack.config.js, 強(qiáng)烈推薦查看 ng2中文官方文檔泄伪！Webpack簡(jiǎn)介 其中有詳細(xì)的說明。
針對(duì) 【英雄指南】匿级，只需要簡(jiǎn)化點(diǎn)的配置蟋滴。
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: './src/app/main.ts',
output: {
path: root('dist'),
filename: 'app.bundle.js'
},
resolve: {
extensions: ['', '.js', '.ts']
},
module: {
loaders: [
{
test: /\.ts$/,
loaders: ['awesome-typescript-loader', 'angular2-template-loader']
},
{
test: /\.css$/,
exclude: root('src', 'app'),
loader: ExtractTextPlugin.extract({fallbackLoader: 'style-loader', loader: ['css']})
},
// all css required in src/app files will be merged in js files
{
test: /\.css$/,
include: root('src', 'app'),
loader: 'raw'
},
// support for .html as raw text
{
test: /\.html$/,
loader: 'raw',
exclude: root('src', 'index.html'),
include: root('src', 'app')
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new ExtractTextPlugin({filename: 'css/[name].[hash].css'})
]
};
// Helper functions
function root(args) {
args = Array.prototype.slice.call(arguments, 0);
return path.join.apply(path, [__dirname].concat(args));
}
去除system.js
moudleId
要webpack正常打包，還需要清除systemjs的東西痘绎，如index.html中的鏈接津函，以及app/xxx.ts中的moudle.id。
原因是SystemJS和Webpack處理ng2的文件相對(duì)路徑是不一樣的孤页。
之前的 【英雄指南】中某個(gè) app.dashborad.component.ts中會(huì)存在 moudle.id尔苦，但是webpack就不需要這個(gè)了。
參考 相對(duì)于組件的路徑
Webpack: 加載模板和樣式表
Webpack 開發(fā)者可以采用 moduleId 的另一個(gè)替代方案行施。通過讓組件元數(shù)據(jù)的 template 和 styles / styleUrls 屬性以 ./ 開頭允坚，并使其指向相對(duì)于組件的 URL ，可以在運(yùn)行期間為它們加載模板和樣式表悲龟。
import { Component } from '@angular/core';
import '../../public/css/styles.css';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent { }
index.html
使用Webpack可以讓index頁面屋讶，不用引入 <script>, <link>之類的，借助插件依賴庫等须教，就能自動(dòng)插入到目標(biāo)js中皿渗。所以，最后的【英雄指南】index.html內(nèi)容很少轻腺。
<html>
<head>
<base href="/">
<title>Angular2 QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>
dist目錄中的index.html會(huì)添加相關(guān)的 引用乐疆。
<script type="text/javascript" src="app.bundle.js"></script></body>
運(yùn)行應(yīng)用
上述改造完成！需要編譯檢驗(yàn)效果贬养。
啟動(dòng)server
npm run server
編譯完成挤土，沒出現(xiàn)錯(cuò)誤后，在瀏覽器中輸入 http://localhost:8080/ 就能看到效果误算。而且仰美，你修改ts文件后就會(huì)自動(dòng)編譯迷殿，自動(dòng)reload頁面。
注意咖杂，使用webpack-dev-server是不會(huì)編譯dist目錄的庆寺，是在內(nèi)存中生成運(yùn)行的，不在磁盤上诉字。
生成dist
npm run build / npm run build:prod
生成的dist目錄懦尝，只有兩個(gè)文件 app.bundle.js, index.html 其他的都不見，app目錄中的html壤圃，css都在js中陵霉。
你可根據(jù)需求配置。
但是有個(gè)小問題伍绳，在dist中直接打開Index.html 只會(huì)顯示 【Loading ...】, F12調(diào)試發(fā)現(xiàn)踊挠，錯(cuò)誤顯示，沒有找到app.bundle.js墨叛， 這個(gè)有點(diǎn)奇怪止毕。有知道的同學(xué)模蜡，告知一下漠趁，如何在目標(biāo)文件中，直接打開index.html正確顯示內(nèi)容忍疾！
代碼
老地方闯传， 其中ng2-tour-of-heroes就是!
