gistfile1.txt

//ERROR:

ERROR in ./app/index.js
Module parse failed: /home/vagrant/Projects/com_oauth_manager/media/com_oauth_manager/js/com_oauthmanager/app/index.js Unexpected token (6:16)
You may need an appropriate loader to handle this file type.
| var App = require('./component/App');
| 
| ReactDOM.render(<App />, document.getElementById('oauth-manager'));


//WEBPACK.CONFIG.JS
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    entry : __dirname + '/app/index.js',
    module : {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            }
        ],
        rules: [
            {
              test: /\.css$/,
              use: ExtractTextPlugin.extract({
                fallback: "style-loader",
                use: "css-loader"
              })
            }
          ]
    },
    output: {
        filename : 'bundled.js',
        path : __dirname + '/build'
    },
    watch: true,
    watchOptions: {
        aggregateTimeout: 300,
        poll: 200
    },
    plugins: [
        new ExtractTextPlugin("styles.css"),
    ]
};


// MY index.js

var React = require('react');
var ReactDOM = require('react-dom');
var Router = require('react-router-dom').BrowserRouter;
var App = require('./component/App');

ReactDOM.render(<App />, document.getElementById('oauth-manager'));



//component/App.js

var React = require('react');
var ReactRouter = require('react-router-dom');
var Router = ReactRouter.BrowserRouter;
var Route = ReactRouter.Route;
var Index = require('../pages/Index');
var SideBar = require('../component/SideBar');

class App extends React.Component {

    render () {
        return (
            <Router>
                <div className="container">
                    <div className="row-fluid">
                        <SideBar />
                        <div className="span10">
                            <Route path="/" component={Index} />
                        </div>
                    </div>
                </div>
            </Router>
        );
    };
}

module.exports = App;

try to use

            {
                test: /\.css$/,
                loader: "style-loader!css-loader"
            },

instead of your "rules"

this is loader, not rule