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>
<meta charset="utf-8" />
<title>@ViewData["Title"]</title>
<link rel="stylesheet" href="/dist/main.css" />
</head>
<body>
@RenderBody()

View File

@@ -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",

View File

@@ -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
]
};