add css loader

client/components/App.jsx

 import React from 'react';
+import '../main.css';
 
 export default class App extends React.Component {
   render() {
     return (
-     <div style={{textAlign: 'center'}}>
+     <div className='text-center'>
         <h1>Hello World</h1>
       </div>);
   }

client/main.css

+.text-center {
+  text-align: center;
+}

package.json

@@ -18,6 +18,9 @@
     "babel-core": "^6.24.1",
     "babel-loader": "^7.0.0",
     "babel-preset-es2015": "^6.24.1",
-    "babel-preset-react": "^6.24.1"
+    "babel-preset-react": "^6.24.1",
+    "css-loader": "^0.28.1",
+    "extract-text-webpack-plugin": "^2.1.0",
+    "style-loader": "^0.17.0"
   }
 }

readme.md

@@ -22,4 +22,6 @@ output: {
   path: path.resolve('dist'),
   filename: '[name].[chunkhash]_bundle.js'
 }
+
+# https://github.com/baldore/open-browser-webpack-plugin 打开浏览器
 ```

webpack.config.js

@@ -2,6 +2,8 @@ const path = require('path');
 
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 
+const ExtractTextPlugin = require("extract-text-webpack-plugin");
+
 const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
   template: './client/index.html',
   filename: 'index.html',
@@ -17,8 +19,12 @@ module.exports = {
   module: {
     loaders: [
       { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
-      { test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ }
+      { test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ },
+      { test: /\.css/, loader: ExtractTextPlugin.extract({ fallback: "style-loader", use: "css-loader" }), exclude: /node_modules/ }
     ]
   },
-  plugins: [HtmlWebpackPluginConfig]
+  plugins: [
+    HtmlWebpackPluginConfig,
+    new ExtractTextPlugin("styles.css")
+  ]
 }