Angular2開發基礎之Webpack

本文首發簡書http://www.jianshu.com/p/4b4264f045b7, 歡迎轉載，但請註明轉載鏈接，謝謝！

目標

上篇文章Angular2開發基礎之TSC編譯 解決如何使用TSC來編譯ng2項目，以及如何解決出現的error。這些點是新手容易忽視的內容， 要熟悉ng開發的工具鏈，還是需要掌握其中的重點。
本篇文章是它的姊妹篇，小目標是：
- package.json加入script
- webpack.config.js
- webpack配置完成 app.bundle.js
- webpack-dev-server
完整代碼 -> 傳送門

環境

需要說明，本教程僅是Windows的實操，Linux，Mac環境，會有不同。
- 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 dist

每次都敲上述命令，肯定不是聰明的選擇，需要加入到package.json中完成腳本的編寫。

step 1 : scripts

@package.json 中添加如下腳本， 注意， 你可以取 build 爲你想要的字符串。

"scripts": {
    "build": "tsc --rootDir src --outDir dist"
  },

然後再終端執行：

npm run build

Look, dist出現，內容跟之前一致。

爲了讓其他小夥伴download代碼後，能直接使用 npm install， 把typings相關的也可以自動download，需要小小修改下package.json 中的 scripts

"postinstall": "typings install",

刪除dist, node_moudles, typings 後，使用 npm install，就能下載所有相關依賴庫以及文件了。

step 2: 添加Webpack

Webpack 簡單的說，就是可以混合src中所有的ts源文件，並且僅僅生成一個bundle.js文件， 還可以進行對生成的js文件混淆。

建議安裝全局 -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位置有問題，應該剛在底部標籤的上面。

... ...
<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 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