title: angular2 webpack large bundle size with sass
body: <p>I have webpack bundle size issue which is cause by the sass styles...</p>
  
  <p>I have many angular2 components which I design using the materialize-css library. I use the <code>@extend</code> instead of putting the materialize-css classes inside my html to encapsulate the library from the html itself.</p>
  
  <p>The issue I'm having is extremely large bundle size with webpack because each component's sass imports the materialize-css package and because the style of the component is loaded using <code>raw</code> loader it gets embedded into the bundle js file. So what I get is huge bundle with the same materialize-css styles for every single component.</p>
  
  <p>Just for comparing I compiled my application with all the styles commented out and the bundle size is 1.08MB when with styles included it is 5.26MB</p>
  
  <p>Can anyone point me to the proper solution?</p>
  
  <p>Thanks!</p>
  
  <p>EDIT:
  My webpack definitions:</p>
  
  <p>Webpack.common:</p>
  
  <pre><code>import * as webpack from 'webpack';
  import {Configuration} from 'webpack';
  import * as path from 'path';
  import {PathHelper} from '../../common/pathHelper';
  var ExtractTextPlugin = require('extract-text-webpack-plugin');
  var HtmlWebpackPlugin = require('html-webpack-plugin');
  
  process.env.ENV = process.env.NODE_ENV;
  
  export var webpackCommonConfiguration: Configuration = {
    entry: {
      'polyfills': './src/app/polyfills.ts',
      'app': './src/app/app.ts',
      'signin': './src/app/signinApp.ts',
      'vendor': './src/app/vendor.ts',
      'design': './src/app/design.scss'
    },
    resolve: {
      extensions: ['', '.ts', '.js', 'scss']
    },
    module: {
      loaders: [
        {
          test: /\.ts$/,
          loader: 'ts'
        },
        {
          test: /\.html$/,
          loader: 'html'
        },
        {
          test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
          loader: 'file?name=assets/[name].[hash].[ext]'
        },
        {
          test: /\.scss$/,
          exclude: PathHelper.getPathFromRoot('src', 'app', 'modules'),
          loader: ExtractTextPlugin.extract('style', 'css!resolve-url!sass?sourceMap')
        },
        {
          test: /\.scss$/,
          include: PathHelper.getPathFromRoot('src', 'app', 'modules'),
          loader: 'raw!sass'
        },
        {
          test: /\.css$/,
          exclude: PathHelper.getPathFromRoot('src', 'app', 'modules'),
          loader: ExtractTextPlugin.extract('style', 'css!resolve-url!css?sourceMap')
        },
        {
          test: /\.css$/,
          include: PathHelper.getPathFromRoot('src', 'app', 'modules'),
          loader: 'raw!resolve-url'
        }
      ]
    },
    plugins: [
      new webpack.optimize.CommonsChunkPlugin({
        name: 'signinCommon',
        chunks: ['signin', 'vendor'],
        minChunks: Infinity
      }),
      new webpack.optimize.CommonsChunkPlugin({
        name: 'homeCommon',
        chunks: ['app', 'vendor'],
        minChunks: Infinity
      }),
      new webpack.DefinePlugin({
        'process.env': {
          'ENV': JSON.stringify(process.env.NODE_ENV)
        }
      }),
      new webpack.ProvidePlugin({
        // Required for the velocity plugin to be loaded correctly (used in materialize css)
        "window.$": "jquery",
        "window.jQuery": "jquery",
        "root.jQuery": "jquery"
      }),
      new HtmlWebpackPlugin({
        template: PathHelper.getPathFromRoot('src', 'app', 'views', 'signin.html'),
        filename: 'signin.html',
        chunks: ['polyfills', 'signinCommon', 'design', 'vendor', 'signin']
      }),
      new HtmlWebpackPlugin({
        template: PathHelper.getPathFromRoot('src', 'app', 'views', 'home.html'),
        filename: 'home.html',
        chunks: ['polyfills', 'homeCommon', 'design', 'vendor', 'app']
      })
    ]
  }
  </code></pre>
  
  <p>Webpack.prod:</p>
  
  <pre><code>var webpackMerge = require('webpack-merge');
  var ExtractTextPlugin = require('extract-text-webpack-plugin');
  import * as webpack from 'webpack';
  import {Configuration} from 'webpack';
  import {webpackCommonConfiguration} from './webpack.common.config'
  import {PathHelper} from '../../common/pathHelper';
  
  interface IProductionConfiguration extends Configuration {
    htmlLoader: any;
  }
  
  var config: IProductionConfiguration = {
  
    devtool: 'source-map',
  
    output: {
      path: PathHelper.getPathFromRoot('dist'),
      publicPath: '/dist/',
      filename: '[name].[hash].js',
      chunkFilename: '[id].[hash].chunk.js'
    },
  
    htmlLoader: {
      minimize: false // workaround for ng2
    },
  
    plugins: [
      new webpack.NoErrorsPlugin(),
      new webpack.optimize.DedupePlugin(),
      new webpack.optimize.UglifyJsPlugin(),
      new ExtractTextPlugin('[name].[hash].css')
    ]
  }
  
  export var webpackProductionConfig: Configuration =
    webpackMerge(webpackCommonConfiguration, config);
  </code></pre>
  
  <p>Edit2:
  Component example:</p>
  
  <p>credits.component.ts:</p>
  
  <pre><code>import {Component} from '@angular/core';
  
  @Component({
    selector: 'credits',
    template: require('./credits.component.html'),
    styles: [require('./credits.component.scss')]
  })
  export class CreditsComponent {
  }
  </code></pre>
  
  <p>credits.component.html:</p>
  
  <pre><code>&lt;footer class="page-footer credits-footer"&gt;
    &lt;div class="footer-copyright"&gt;
      &lt;div class="container"&gt;
      © 2016 Created by Slava Shpitalny
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/footer&gt;
  </code></pre>
  
  <p>credits.component.scss:</p>
  
  <pre><code>@import '~materialize-css/sass/materialize.scss';
  
  :host{
  
    .page-footer.credits-footer{
      @extend .blue;
      margin: 0;
      padding: 0;
  
    }
  }
  </code></pre>