webpack demo - project 1

app.component.ts

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

@Component({
    moduleId: module.id,
    selector: 'Root',
    template: ` <div>
                    <h4>Sample Component</h4>
                    <dfn> {{sample_def}} </dfn>
                </div>
            `

})
export class Rootcomponent {
    sample_def = "Sample data rendered from component";
    constructor() {
        console.log("Root");
    }
}

webpack.config.js

var webpack = require("webpack");
var path = require("path");

module.exports = {
    entry: {
        'app': './app/app.module.ts'
    },
    output: {
        filename: '[name]/dist/bundle.js',
        libraryTarget: "umd"
    },
    module: {
        loaders: [{
                test: /\.css$/,
                exclude: /node_modules/,
                loader: 'style!css'
            },
            {
                test: /\.html$/,
                loader: "html"
            },
            {
                test: /\.ts$/,
                loader: 'awesome-typescript-loader'
            },
        ],
    },
    resolve: {
        extensions: ['', '.ts', '.js']
    },
    htmlLoader: {
        ignoreCustomFragments: [/\{\{.*?}}/],
        root: path.resolve(__dirname, 'assets'),
        attrs: ['img:src', 'link:href']
    }
};