Example of using WebPack to create frontend assets for a non-SPA (Single Page App) project where you selectively load React components within specific templates.

index.js

import MyStuff from 'frontend/components/my-stuff'

module.exports = {
  renderStuff(node, props) {
    // Wrap in <Provider/> here too if using Redux
    ReactDOM.render(<MyStuff {...props} />, node)
  }
}

something.pug

script(src='/assets/frontend.js')
script.
  var node = document.getElementById('foo')
  MyLibrary.renderStuff(node, { extra: 'props', go: 'here' })

webpack.config.js

const webpack = require('webpack')
const path = require('path')

module.exports = {
  entry: [
    'babel-polyfill',
    './frontend/index.js'
  ],
  output: {
    path: path.join(__dirname, 'public'),
    filename: 'frontend.js',
    library: 'MyLibrary', // important bit, exposes global `MyLibrary` variable
    libraryTarget: 'var',
    publicPath: '/assets',
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        cacheDirectory: true,
        exclude: /node_modules/,
        loader: 'babel',
      },
    ],
  },
}