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

This commit is contained in:
SteveSandersonMS
2016-02-09 22:03:01 -08:00
parent 2e9a43d1dc
commit 3a567823e8
3 changed files with 5 additions and 1 deletions

View File

@@ -3,6 +3,7 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>@ViewData["Title"]</title> <title>@ViewData["Title"]</title>
<link rel="stylesheet" href="/dist/main.css" />
</head> </head>
<body> <body>
@RenderBody() @RenderBody()

View File

@@ -8,6 +8,7 @@
"babel-preset-react": "^6.3.13", "babel-preset-react": "^6.3.13",
"css-loader": "^0.23.1", "css-loader": "^0.23.1",
"express": "^4.13.4", "express": "^4.13.4",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.8.5", "file-loader": "^0.8.5",
"react-transform-hmr": "^1.0.2", "react-transform-hmr": "^1.0.2",
"style-loader": "^0.13.0", "style-loader": "^0.13.0",

View File

@@ -1,5 +1,6 @@
var path = require('path'); var path = require('path');
var webpack = require('webpack'); var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = { module.exports = {
devtool: 'inline-source-map', devtool: 'inline-source-map',
@@ -10,7 +11,7 @@ module.exports = {
loaders: [ loaders: [
{ test: /\.ts(x?)$/, include: /ReactApp/, exclude: /node_modules/, loader: 'babel-loader' }, { test: /\.ts(x?)$/, include: /ReactApp/, exclude: /node_modules/, loader: 'babel-loader' },
{ test: /\.ts(x?)$/, include: /ReactApp/, exclude: /node_modules/, loader: 'ts-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' } { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }
] ]
}, },
@@ -25,6 +26,7 @@ module.exports = {
}, },
plugins: [ plugins: [
new webpack.optimize.OccurenceOrderPlugin(), new webpack.optimize.OccurenceOrderPlugin(),
new ExtractTextPlugin('main.css'),
new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js') // Moves vendor content out of other bundles new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js') // Moves vendor content out of other bundles
] ]
}; };