ASP.NET Core + Angular 4 教學 - Webpack 打包

2017-04-15

ASP.NET Core, Angular

-- Pageviews

ASP.NET Core + Angular 4 教學 - Webpack打包範例執行結果未完成

Angular 官方的範例是使用 SystemJS 載入，但網頁一開就載入一大堆 js 檔。request 這麼多檔案，看了就很不舒服。
可以看到圖片底部有 46 requests…

接下來用 Webpack 打包 Angular 套件、TypeScript 及 HTML。把第三方套件跟自製的程式分成兩個 js 檔案。

程式碼延續之前範例：
ASP.NET Core + Angular 4 教學 - 從無到有

1. 安裝 Webpack 套件

安裝 Webpack 及接下來範例打包所需的開發套件，指令如下：

1	npm install --save-dev webpack angular2-template-loader awesome-typescript-loader raw-loader

2. Webpack 設定

新增 webpack.config.js

/// <binding ProjectOpened='Watch - Development' />
var webpack = require("webpack");
var wwwroot = __dirname + "/wwwroot";

module.exports = {
    cache: true,
    entry: {
        "bundle": [wwwroot + "/app/bundle.ts"],
        "bundle-vendors": [wwwroot + "/app/bundle-vendors.ts"],
    },
    output: {
        path: wwwroot + "/js",
        filename: "[name].js",
        sourceMapFilename: "[name].map"
    },
    resolve: {
        extensions: [".ts", ".js", ".html"]
    },
    module: {
        loaders: [
            {
                test: /\.ts$/,
                loaders: [
                    "awesome-typescript-loader",
                    "angular2-template-loader"
                ],
                exclude: /(node_modules)/
            },
            {
                test: /\.html$/,
                loader: "raw-loader"
            }
        ]
    },
    plugins: [
        new webpack.optimize.UglifyJsPlugin(),
        new webpack.optimize.CommonsChunkPlugin({
            name: "bundle-vendors"
        })
    ]
}

※比較值得一提的是 awesome-typescript-loader 打包速度比 ts-loader 快非常多。還在用 ts-loader 的可以考慮換一下。

3. Webpack entry

webpack.config.js 可以看到我設定了兩個進入點，我們在專案中異動檔案如下：

新增 wwwroot\app\bundle-vendors.ts

// core
require("core-js");
require("zone.js");
require("rxjs");

// angular
require("@angular/core");
require("@angular/common");
require("@angular/compiler");
require("@angular/platform-browser");
require("@angular/platform-browser-dynamic");
require("@angular/http");
require("@angular/router");
require("@angular/forms");

新增 wwwroot\app\bundle.ts

1	require("../app/main");

wwwroot\index.html
把 js 參考成 /js/bundle-vendors.js 及 /js/bundle.js。

<!DOCTYPE html>
<html>
<head>
    <title>MyWebsite</title>
    <base href="/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <my-app>Loading AppComponent content here ...</my-app>
    <div id="script">
        <script src="/js/bundle-vendors.js"></script>
        <script src="/js/bundle.js"></script>
    </div>
</body>
</html>

※注意！在這邊我把 script 的參考放到底部，因為在 bundle.js 中會載入 my-app，如果把 script 放到 head 會導致載入失敗。 實際上把 script 放在底部也是比較好的做法。
眼尖的人可能發現到，已經沒有看到任何地方參考 SystemJS，所以我們可以從 package.json 中把 systemjs 移除，或用指令移除：

1	npm uninstall systemjs --save

wwwroot\app\app.component.ts
原本用 templateUrl 參考 html，現在改用 template + require。如此一來就可以把 html template 一起打包。

import { Component } from "@angular/core";

@Component({
    selector: "my-app",
    template: require("./app.component.html")
})
export class AppComponent {
    name = "Angular 4";
}

Startup.cs
特別為 node_modules 建立的虛擬路徑也可以移除了。

using Microsoft.AspNetCore.Builder;
//using Microsoft.AspNetCore.Http;
//using Microsoft.Extensions.FileProviders;
//using System.IO;

namespace MyWebsite
{
    public class Startup
    {
        public void Configure(IApplicationBuilder app)
        {
            app.UseDefaultFiles();
            app.UseStaticFiles();
            //app.UseStaticFiles(new StaticFileOptions()
            //{
            //    FileProvider = new PhysicalFileProvider(
            //    Path.Combine(Directory.GetCurrentDirectory(), @"node_modules")),
            //    RequestPath = new PathString("/node_modules")
            //});
        }
    }
}