Webpack config to split css and js files by route and/or component (Webpack 2)

webpack.config.js

const path = require('path');

module.exports = {
    entry: './src/index.jsx',
    output: {
        path: path.resolve('dist'),
        filename: 'assets/js/[name].[hash:12].js',
        publicPath: 'http://localhost:8080/'
    },
    resolve: {
        extensions: ['.js', '.jsx']
    },
    module: {
        loaders: [
            {
                test: /\.(jpe?g|png|gif|svg|ico)$/i,
                loader: "file-loader",
                query: {
                    name: "assets/images/[name].[ext]",
                    publicPath: "../../"
                }
            },
            {
                test: /\.(sass|scss)$/,
                loaders: [
                    "style-loader/url",
                    {
                        loader: "file-loader",
                        query: {
                            "name": "assets/css/[name].[hash:12].css"
                        }
                    },
                    "extract-loader",
                    "css-loader",
                    "sass-loader"
                ]
            },
            {
                test: /.jsx?$/,
                loaders: ['babel-loader', 'eslint-loader'],
                exclude: /node_modules/
            }
        ]
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',
            minChunks: ({ resource }) => /node_modules/.test(resource)
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: "commons",
            filename: "js/commons.[hash:12].js"
        })
    ]
}