在webpack中使用ExtractTextPlugin忽略Angular2组件样式表

我正在使用 html-webpack-plugin插件注入< script>标记到webpack生成的块的模板文件中.我还有一些全局样式表,我想动态添加到< head>我的HTML模板的一部分.为此,我也使用html-webpack-plugin如下(在这种情况下,app entry / chunk是相关的).

module.exports = {
    entry: {
        'polyfills': './ts/polyfills.ts','vendor': './ts/vendor.ts','app': './ts/app.ts'
    },module: {
        loaders: [
            {
                test: /.ts$/,loaders: ['ts','angular2-template-loader']
            },{
                test: /.html$/,loader: 'html-loader'
            },{
                test: /.css$/,loaders: ['to-string-loader',ExtractTextPlugin.extract('style-loader','css-loader')]
            }
        ]
    },plugins: [
        new ExtractTextPlugin('css/[name].[contenthash].css'),new webpack.ProvidePlugin({
            bootstrap: 'bootstrap'
        }),new webpack.optimize.CommonsChunkPlugin({
            name: 'app',filename: 'js/[name].[chunkhash].min.js',chunks: ['app']
        }),new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',chunks: ['vendor']
        }),new webpack.optimize.CommonsChunkPlugin({
            name: 'polyfills',chunks: ['polyfills']
        }),new HtmlWebpackPlugin({
            template: 'my-template.html',filename: 'my-template.html',inject: 'body',hash: false
        }),]
};

下面是app.ts文件,其中我为每个样式表添加了一个require语句,我希望将其包含在我的模板中(它们被合并到一个样式表中).

require('main.css');
require('misc.css');

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

基本上这很好用,但问题是我正在将此配置用于Angular2应用程序,该应用程序由可能具有关联样式表的组件组成,如本例所示.

@Component({
    styleUrls: [
        'my-stylesheet.css'
    ]
})
export class MyComponent { ... }

构建应用程序通常会导致对组件的这些样式表进行大量的HTTP调用,因此为了解决这个问题,我使用angular2-template-loader将样式表直接拖到组件中.此加载器的工作原理如下.

The angular2-template-loader searches for templateUrl and styleUrls
declarations inside of the Angular 2 Component metadata and replaces
the paths with the corresponding require statement.

这个问题是除了添加到app.ts入口点的两个样式表之外,webpack还包括从我的Angular2组件引用的每个样式表.因为它遍历应用程序的依赖项并找到由angular2-template-loader添加的require语句.这是不可取的,因为我希望这些样式表对于它们所属的组件是本地的,即在JS中内联.

因此,我需要一种方法,只在我的入口点中包含我需要的样式表,可能以某种方式排除组件样式表.问题是,在这两种情况下,文件都具有.css扩展名,因此它们都通过了extract-text-plugin的测试.我看了一下加载器/插件的文档,但我找不到任何可以解决我问题的东西.

所以我想要的是将一个app.[contenthash] .css文件添加到我的模板文件中(这部分可以工作),但不包括我的Angular2组件中引用的样式表(包括因为angular2-template-loader).

如何防止这些Angular2组件样式表包含在添加到我的HTML模板的样式表中？

require('main.css');
require('misc.css');

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

@Component({
  selector: 'my-app',template: `<h1>My Angular 2 App</h1>`,styleUrls: ['my-stylesheet.css']
})
export class AppComponent {}

{
  test: /.css$/,exclude: /app.+.css$/,<== add this (exclude all styles from app folder)
  loaders: ['to-string-loader','css-loader')]
},{
  test: /app.+.css$/,loader: 'raw'  <== use raw loader for these files
}