如何设置Webpack以便能够正确加载templateUrl和styleUrls（使用相对路径）？

Question

我无法正确加载模板，除非我在装饰器@Component中放置require，但后来我在模板中遇到子组件问题。 我想用相对路径做 "./component.name.template.html"和.scss文件相同

组件：

import {MovieService} from "../../services/movie.service";
import {Router, Route, ActivatedRoute} from "@angular/router";
import {HeaderBarComponent} from "../header-bar/header-bar.component";
import * as moment from 'moment';
import "rxjs/Rx";


@Component({
    selector    : 'fl-films',
    templateUrl : './film-list.component.html',
    // that one below here works but not for child component 
    // template: require('./film-list.component.html'), 
    styleUrls   : ['app/films-list.component.scss']
})

export class FilmsListComponent implements OnInit {
  ...
}

错误：

zone.js?fad3:1382GET http://localhost:4200/film-list.component.html 404 (Not Found)
Unhandled Promise rejection: Failed to load film-list.component.html ; Zone: <root> ; Task: Promise.then ; Value: Failed to load film-list.component.html

我的文件夹结构：

- /node_modules
- /src
-- /app
 |- /assets
 |- /components
 |- /services
 |- /shared
 |- app.component.scss
 |- app.component.ts
--/config
 |- helpers.js
 |- webpack.common.js
 |- webpack.dev.js
 |- webpack.prod.js
- index.html
- main.t
- polyfills.ts
- vendor.ts

helpers.js：

    var path = require('path');
    var _root = path.resolve(__dirname, '..');

    function root(args) {
        args = Array.prototype.slice.call(arguments, 0);
        return path.join.apply(path, [_root].concat(args));
    }
    exports.root = root;

webpack.common.js：

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var autoprefixer = require('autoprefixer');
var helpers = require('./helpers');
var path = require('path');

module.exports = {
    entry: {
        'polyfills' : './src/polyfills.ts',
        'vendor'    : './src/vendor.ts',
        'app'       : './src/main.ts'
    },

    resolve: {
        extensions: ['', '.ts', '.js', '.json', '.css', '.scss', '.html'],
        root: 'src',
        alias: {
            'services'  : 'app/services',
            'shared'    : 'app/shared',
            'directives': 'app/directives',
            'components': 'app/components',
            'models'    : 'app/models',
            'test-helpers': 'app/test-helpers'
        }
    },

    module: {
        loaders: [
            {
                test: /\.ts$/,
                loaders: ['awesome-typescript-loader', 'angular2-template-loader'],
                exclude: [/\.(spec|e2e)\.ts$/, /node_modules\/(?!(ng2-.+))/]
            },

            {
                test    : /\.html$/,
                loader  : 'raw',
                exclude: [ path.resolve(__dirname, "src/index.html") ]
            },

            {
                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: 'file?name=assets/[name].[hash].[ext]'
            },

            {
                test    : /\.scss$/,
                loaders : ["raw-loader", "sass-loader"],
                exclude : [/node_modules/]
            },

            {
                test    : /node_modules\/bootstrap\/dist\/css\/bootstrap\.css/,
                loaders : ['style-loader', 'css-loader']
            },

        ]
    },

    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: ['app', 'vendor', 'polyfills']
        }),

        new HtmlWebpackPlugin({
            template: 'src/index.html'
        })
    ]
};