angular+webpack（二）
上篇文章Angular2開發基礎之TSC編譯 解決如何使用TSC來編譯ng2項目，以及如何解決出現的error。這些點是新手容易忽視的內容， 要熟悉ng開發的工具鏈，仍是須要掌握其中的重點。
本篇文章是它的姊妹篇，小目標是：javascript
- package.json加入script
- webpack.config.js
- webpack配置完成 app.bundle.js
- webpack-dev-server
完整代碼 -> 傳送門
環境
須要說明，本教程僅是Windows的實操，Linux，Mac環境，會有不一樣。html
- Windows 10 64位
- gitBash version 2.9.0.windows.1
- NodeJs version 6.8.0
- npm version 3.10.8
- IntelliJ IDEA 15
效果展現
實操
在實操以前，請先仔細閱讀 Angular2開發基礎之TSC編譯ng-starter-webpack進行到如今，可使用 tsc命令來編譯ng2項目 $(npm bin)/tsc --rootDir src --outDir distjava
每次都敲上述命令，確定不是聰明的選擇，須要加入到package.json中完成腳本的編寫。node
step 1 : scripts
@package.json 中添加以下腳本， 注意， 你能夠取 build 爲你想要的字符串。webpack
"scripts": { "build": "tsc --rootDir src --outDir dist" },
而後再終端執行：git
npm run build
Look, dist出現，內容跟以前一致。github
爲了讓其餘小夥伴download代碼後，能直接使用 npm install， 把typings相關的也能夠自動download，須要小小修改下package.json 中的 scriptsweb
"postinstall": "typings install",
刪除dist, node_moudles, typings 後，使用 npm install，就能下載全部相關依賴庫以及文件了。docker
step 2: 添加Webpack
Webpack 簡單的說，就是能夠混合src中全部的ts源文件，而且僅僅生成一個bundle.js文件， 還能夠進行對生成的js文件混淆。typescript
建議安裝全局 -g，這裏僅僅安裝在根目錄
npm install --save-dev webpack
同時，還須要安裝 相關loader， 參看 webpack文檔，知道，webpack本來僅支持js， 若是須要支持其餘如ts，json格式的文件，就須要使用相關的 loader。
npm install --save-dev ts-loader
step 3: webpack.config.js
爲了更好的使用webpack，須要使用webpack.config.js來配置webpack。新建webpack.config.js文件。
var webpack = require('webpack'); module.exports = { entry: './src/main.ts', output: { path: './dist', filename: 'app.bundle.js' }, module: { loaders: [ { test: /\.ts$/, loader: 'ts-loader' } ] }, resolve: { extensions: ['', '.js', '.ts'] }, };
以上內容表達2個意思： 1. 從哪裏來， 到哪裏去 ? 2. 跟你一塊兒，有誰？ 3.如何處理擴展名
如何理解：
- entry表示入口是哪一個ts， main.ts， 編譯完成的目標文件， output指定
- loaders表示須要load哪些文件進行編譯， .ts$文件， 使用哪一個loader： ts-loader
- resolve 表示生成的文件的擴展名，以及編譯的文件擴展名等
完成以上，執行
$(npm bin)/webpack --progress
查看 dist目錄，只有一個文件app.bundle.js 並且文件很大， 1.53M
step4: 運行測試
以上配置好了webpack， 須要進行測試了，等這一刻很久了。
@index.html 添加 app.bundle.js script
<title>Angular 2 starter webpack</title> <script src="../dist/app.bundle.js"></script>
而後執行，調試發現，出現error：
Uncaught reflect-metadata shim is required when using class decorators
這是由於webpack不包含任何 reflect-metadata js code 即便這些庫文件在package.json中添加了依賴。 因此，須要強制在main.ts中添加這些庫文件，包括：
- reflect-metadata
- rxjs
- zone.js
import 'core-js'; import 'reflect-metadata'; import 'zone.js/dist/zone'; ... ...
再次運行， $(npm bin)/webpack --progress 獲得新的 bundle.js, 並且比以前大了一些。
查看瀏覽器， 發現仍是Loading...
調試發現，仍是error，不過此次提示 找不到my-app
這個是由於 加載script位置有問題，應該剛在<body>底部標籤的上面。
... ...
<my-app>Loading...</my-app> <script src="../dist/app.bundle.js"></script>
運行瀏覽器，OK， 完美~ My App出現了!
step 5: 再修改scripts
注意，剛纔編譯使用的是長命令： $(npm bin)/webpack --progress ， 可否像以前使用 npm run build那樣 就直接運行 webpack --progress, 能夠！
修改package.json -> scripts
"build": "tsc --rootDir src --outDir dist",
"build": "webpack --progress",
step 6: html-webpack-plugin
dist目錄生成index.html
注意， index.html是在src目錄中，而生成的js是在dist中，webpack可否在執行npm run build 中生成index.html，而且將 對應的app.bundle.js嵌入到index.html文件中。
npm install --save-dev html-webpack-plugin
@完整 webpack.config.js
var webpack = require('webpack'); var HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/main.ts', output: { path: './dist', filename: 'app.bundle.js' }, module: { loaders: [ { test: /\.ts$/, loader: 'ts-loader' } ] }, resolve: { extensions: ['', '.js', '.ts'] }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }) ] };
同時，能夠刪除掉src/index.html 中的 script導入語句
<script src="../dist/app.bundle.js"></script>
再次運行 npm run build, 奇蹟發生了，dist中存在了index.html, 而且文件中存在 了<script>標籤, 可不是copy，或者添加進入的，是自動生成的。Nice！！！
<script type="text/javascript" src="app.bundle.js"></script></body>
step 7 ： app.bundle.js 瘦身
要實現app.bundle.js瘦身，須要在package中添加某些Magic。
"build:prod": "webpack -p --progress",
npm run build:prod
大小減半了，只有651KB
step 8: webpack-dev-server
在開發中，如何不用每次修改代碼後，重複執行編譯，運行，刷新頁面呢？ 推薦使用 webpack-dev-server
npm install --save-dev webpack-dev-server
@package.json -> scripts
"server": "webpack-dev-server --line --progress"
npm run server
在瀏覽器輸入 http://localhost:8080/ 就能夠看到效果， 並且，當修改文件時候，server自動編譯 刷新頁面。Nice! Nice! Nice！
小結：
基本的webpack使用到這裏就完結了，須要參看代碼的同窗，請訪問個人 ng2-started-webpack
- 1. 二二二
- 2. Vue基礎6天實施筆記
- 3. 二十二
- 4. CSS(二十二)
- 5. 二週二次課
- 6. Matlab：二維圖（二）
- 7. 二十二 反射
- 8. 打卡二十二
- 9. jQuery EasyUI(二十二)
- 10. Java基本語法二二二
- 更多相關文章...
- • Hibernate的二級緩存 - Hibernate教程
- • MySQL BIT、BINARY、VARBINARY、BLOB（二進制類型） - MySQL教程
- • RxJava操作符（二）Transforming Observables
- • Kotlin學習（二）基本類型
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 二二二
- 2. Vue基礎6天實施筆記
- 3. 二十二
- 4. CSS(二十二)
- 5. 二週二次課
- 6. Matlab：二維圖（二）
- 7. 二十二 反射
- 8. 打卡二十二
- 9. jQuery EasyUI(二十二)
- 10. Java基本語法二二二