Webpack for react sub apps

Webpack is used to pre-compile your react component into ES5 so that it can be recognised by browsers. But what if you are webapp is hybrid and react is taking over only small portion of your webapp.

Lets suppose you have two react components, lets call them app1 and app2. Both will take over different div tag on two different pages on your website.

In this case, you can use following webpack code to precompile both of them.

var webpack = require('webpack')  
var path = require('path')

module.exports = {  
    entry:{
        app1: './src/app1.js',
        app2:  './src/app2.js'
    },
    output:{
        path: path.join(__dirname, "public/build"),
        filename: '[name].js'

    },
    devtool: '#source-map',
    module:{    
        loaders: [
            { 
                test: /.jsx?$/,
                exclude:/(node_modules)/,
                loader: 'babel-loader',
                query:{
                    presets:['react','es2015']
                }
            }
        ]

    }
}

This will create app1.js app1.js.map for app1 and app2.js app2.js.map for app2 at the destination folder.

This is working fine for me, please let me know if you run into any issues while using this.