Use WebPack CSS ExtractTextPlugin to integrate project CSS on product…

…ion builds

package.json

@@ -55,6 +55,7 @@
     "es6-promise-loader": "^1.0.1",
     "exports-loader": "^0.6.2",
     "expose-loader": "^0.7.1",
+    "extract-text-webpack-plugin": "^1.0.1",
     "file-loader": "^0.8.5",
     "html-webpack-plugin": "^2.8.1",
     "http-server": "^0.8.5",

src/index.html

@@ -29,6 +29,11 @@
   <meta name="theme-color" content="#00bcd4">
   <!-- end favicon -->
 
+  <% if (webpackConfig.metadata.ENV === 'production') { %>
+  <!-- Webpack CSS chunks -->
+  <link rel="stylesheet" href="<%= webpackConfig.metadata.style %>">
+  <% } %>
+
   <!-- base url -->
   <base href="<%= webpackConfig.metadata.baseUrl %>">
 

webpack.prod.config.js

@@ -20,10 +20,12 @@ var WebpackMd5Hash    = require('webpack-md5-hash');
 var ENV = process.env.NODE_ENV = process.env.ENV = 'production';
 var HOST = process.env.HOST || 'localhost';
 var PORT = process.env.PORT || 8080;
+var ExtractTextPlugin = require("extract-text-webpack-plugin");
 
 var metadata = {
   title: 'Angular2 Webpack Starter by @gdi2990 from @AngularClass',
   baseUrl: '/',
+  style: 'styles.css',
   host: HOST,
   port: PORT,
   ENV: ENV
@@ -102,6 +104,9 @@ module.exports = {
       // Support for CSS as raw text
       { test: /\.css$/,   loader: 'raw-loader' },
 
+      // gather all CSS chunks gathered in a
+      { test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") },
+
       // support for .html as raw text
       { test: /\.html$/,  loader: 'raw-loader', exclude: [ root('src/index.html') ] }
 
@@ -168,6 +173,10 @@ module.exports = {
       algorithm: gzipMaxLevel,
       regExp: /\.css$|\.html$|\.js$|\.map$/,
       threshold: 2 * 1024
+    }),
+    // Generate CSS bundle
+    new ExtractTextPlugin(metadata.style, {
+      allChunks: true
     })
   ],
   // Other module loader config