From 3a567823e80cb96efb780becdad9eac88f746949 Mon Sep 17 00:00:00 2001 From: SteveSandersonMS Date: Tue, 9 Feb 2016 22:03:01 -0800 Subject: [PATCH] Extract CSS into a separate file so it can be loaded independently of JS execution --- samples/react/MusicStore/Views/Shared/_Layout.cshtml | 1 + samples/react/MusicStore/package.json | 1 + samples/react/MusicStore/webpack.config.js | 4 +++- 3 files changed, 5 insertions(+), 1 deletion(-) diff --git a/samples/react/MusicStore/Views/Shared/_Layout.cshtml b/samples/react/MusicStore/Views/Shared/_Layout.cshtml index 93395f5..f64f7f5 100755 --- a/samples/react/MusicStore/Views/Shared/_Layout.cshtml +++ b/samples/react/MusicStore/Views/Shared/_Layout.cshtml @@ -3,6 +3,7 @@ @ViewData["Title"] + @RenderBody() diff --git a/samples/react/MusicStore/package.json b/samples/react/MusicStore/package.json index 5381bbb..16c77e3 100644 --- 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 index e362f45..c644612 100644 --- 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 ] };