Ignore Angular2 component stylesheets with ExtractTextPlugin in webpack
<p>I am using the <a href="https://github.com/ampedandwired/html-webpack-plugin" rel="noreferrer">html-webpack-plugin</a> plugin to inject <code>&lt;script&gt;</code> tags into a template file for the chunks that webpack generates. I also have a few global stylesheets that I want to dynamically add to the <code>&lt;head&gt;</code> section of my HTML template. For that, I am also using the html-webpack-plugin as follows (the <code>app</code> entry/chunk is the relevant one in this case).</p>

<pre><code>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',
            filename: 'js/[name].[chunkhash].min.js',
            chunks: ['vendor']
        }),

        new webpack.optimize.CommonsChunkPlugin({
            name: 'polyfills',
            filename: 'js/[name].[chunkhash].min.js',
            chunks: ['polyfills']
        }),

        new HtmlWebpackPlugin({
            template: 'my-template.html',
            filename: 'my-template.html',
            inject: 'body',
            hash: false
        }),
    ]
};
</code></pre>

<p>Below is the <code>app.ts</code> file, where I have added a <code>require</code> statement for each stylesheet that I would like to include in my template (they are being merged together into a single stylesheet).</p>

<pre><code>require('main.css');
require('misc.css');

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

platformBrowserDynamic().bootstrapModule(AppModule);
</code></pre>

<p>Essentially this works well, but the catch is that I am using this configuration for an Angular2 application, which is composed of components which may have associated stylesheets, like in this example.</p>

<pre><code>@Component({
    styleUrls: [
        'my-stylesheet.css'
    ]
})
export class MyComponent { ... }
</code></pre>

<p>Building the application would normally result in a ton of HTTP calls for these stylesheets for the components, so to solve this, I have pulled the stylesheets directly into the components by using <a href="https://github.com/TheLarkInn/angular2-template-loader" rel="noreferrer">angular2-template-loader</a>. This loader works as follows.</p>

<blockquote>
  <p>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.</p>
</blockquote>

<p>The problem with this is that besides the two stylesheets that are added to the <code>app.ts</code> entrypoint, webpack also includes every stylesheet that is referenced from my Angular2 components. Because it goes through the dependencies of the application and finds the <code>require</code> statements added by angular2-template-loader. This is undesirable, because I want those stylesheets to be local to the components they belong to, i.e. be inline in the JS.</p>

<p>Therefore I need a way to <em>only</em> include the stylesheets that I <code>require</code> directly in my entrypoints, perhaps by somehow excluding the component stylesheets. The problem is that in both cases, the file have the <code>.css</code> extension, so they both pass the test for the <code>extract-text-plugin</code>. I took a look at the documentation of the loaders/plugins, but I couldn't find anything that would solve my problem.</p>

<p>So what I want is to add a <code>app.[contenthash].css</code> file to my template file (this part works), but <em>excluding the stylesheets referenced in my Angular2 components</em> (included because of angular2-template-loader).</p>

<p>How can I prevent these Angular2 component stylesheets from being included in the stylesheet that is added to my HTML template?</p>