Render UI using React inside Menu Page

Hello.

This is actually more a question rather than a bug report.
What I'm currently trying to do is rendering React Components inside the menubar's page.
To achieve this I'm using electron, react and webpack.

However, when I bundle my application with webpack and try to run the build via electron neither the menubar's constructor nor any of its EventEmitters are getting called - which ends up with having my 'electron' application running, but without any additional icon in my menu bar.

Below is my current webpack.config.js - any help is really appreciated.

const path = require('path');
const webpack = require('webpack');
const buildPath = path.resolve(__dirname, 'build');
const nodeModulesPath = path.resolve(__dirname, 'node_modules');
const TransferWebpackPlugin = require('transfer-webpack-plugin');
const WriteFilePlugin = require('write-file-webpack-plugin');

const config = {

    // This is the setting for electron.
    target: "electron",

    // This enables the creation of source maps,
    // which improve the debuggability of the application
    // by allowing you to see where an error was raised.
    devtool: "source-map",

    // Entry file to startsbuilding from.
    // entry.jsx is the renderer process,
    // main.js is for the main process.
    // Electron will be pointed at the main bundle,
    // while the Renderer will point to entry bundle.
    entry: {
        'app': './renderer/app.jsx',
        'index': './index.js'
    },

    // Location and filename pattern of the
    // final build output files.
    output: {
        path: path.join(__dirname, 'build'),
        filename: "[name].bundle.js"
    },

    devServer: {
        outputPath: path.join(__dirname, 'build'),
        inline: false
    },


    module: {
        preLoaders: [
            // Performs linting on code for quality checks
            {
                test: /(\.js$|\.jsx$)/,
                include: path.resolve(__dirname, "renderer"),
                loader: "eslint"
            }
        ],
        loaders: [
            {
                // Post-css loader and its plugins.
                test: /\.scss$/,
                include: path.resolve(__dirname, "./renderer/styles"),
                loaders: [
                    'style',// inserts raw css into styles elements.
                    'css', // css-loader parses css files resolves url() expressions.
                    'sass' // sass-loader for sass compilation
                ]
            },
            {
                // Babel loader configuration. Performs the JSX and ES6 to JS transformations.
                test: /(\.js$|\.jsx$)/,
                include: [
                    path.resolve(__dirname, "renderer"), 
                    path.resolve(__dirname, "public"),
                    ],
                exclude: /node_modules\/(?!menubar\/).*/,
                loader: 'babel-loader',
                query: {
                    presets: ['react', 'es2015', 'stage-2']
                }
            },
            {
                test: /\.json$/,
                loader: 'json-loader'
            }
        ]
    },

    eslint: {
        configFile: '.eslintrc'
    },

    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        // Allows error warnings but does not stop compiling
        new webpack.NoErrorsPlugin(),
        new TransferWebpackPlugin([
            {from: 'public'},
        ], __dirname),
        new WriteFilePlugin(),

    ]
}

module.exports = config;

Start with the supplied webpack.config.js and trace how renderer/app.jsx and index.js are bundled and loaded by Electron. Confirm where the menubar constructor and EventEmitters should run, then verify the application creates its menu bar icon when the built bundles are launched.