Extract CSS into a separate file so it can be loaded independently of JS execution

SteveSandersonMS · SteveSandersonMS · commit 3a567823e80c · 2016-02-09T22:03:01.000-08:00
diff --git a/samples/react/MusicStore/Views/Shared/_Layout.cshtml b/samples/react/MusicStore/Views/Shared/_Layout.cshtml
@@ -3,6 +3,7 @@
     <head>
         <meta charset="utf-8" />
         <title>@ViewData["Title"]</title>
+        <link rel="stylesheet" href="/dist/main.css" />
     </head>
     <body>
         @RenderBody()
diff --git a/samples/react/MusicStore/package.json b/samples/react/MusicStore/package.json
@@ -8,6 +8,7 @@
     "babel-preset-react": "^6.3.13",
     "css-loader": "^0.23.1",
     "express": "^4.13.4",
+    "extract-text-webpack-plugin": "^1.0.1",
     "file-loader": "^0.8.5",
     "react-transform-hmr": "^1.0.2",
     "style-loader": "^0.13.0",
diff --git a/samples/react/MusicStore/webpack.config.js b/samples/react/MusicStore/webpack.config.js
@@ -1,5 +1,6 @@
 var path = require('path');
 var webpack = require('webpack');
+var ExtractTextPlugin = require('extract-text-webpack-plugin');
 
 module.exports = {
     devtool: 'inline-source-map',
@@ -10,7 +11,7 @@ module.exports = {
         loaders: [
             { test: /\.ts(x?)$/, include: /ReactApp/, exclude: /node_modules/, loader: 'babel-loader' },
             { test: /\.ts(x?)$/, include: /ReactApp/, exclude: /node_modules/, loader: 'ts-loader' },
-            { test: /\.css$/, loader: "style-loader!css-loader" },
+            { test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader') },
             { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }
         ]
     },
@@ -25,6 +26,7 @@ module.exports = {
     },
     plugins: [
         new webpack.optimize.OccurenceOrderPlugin(),
+        new ExtractTextPlugin('main.css'),
         new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js') // Moves vendor content out of other bundles
     ]
 };
