Webpack, React hot reloader and multiple entries

Question

All the examples I've seen have the entries as an array of strings when doing hot module replacement.

How does it work when you have multiple entries? I tried the following and still got the Uncaught exception: HMR is disabled message.

Webpack config:

module.exports = {
    context: path.join(staticPath, "js"),
    entry: {
        hot: 'webpack/hot/only-dev-server',
        main: './main.js',
        admin: './admin.js',
        vendor: './vendor.js',
        devServerClient: 'webpack-dev-server/client?http://localhost:4000'
    },

    output: {
        filename: "[name].bundle.js",
        path: path.join(staticPath, "js/"),
        publicPath: "http://localhost:4000/static/bundles/"
    },

    module: {
        loaders: [
            { test: /\.js$/, exclude: /node_modules/, loaders: ["react-hot", "babel-loader"] },
            { test: /\.json$/, loader: "json" }
        ]
    },

    resolve: {
        extensions: ['', '.js', '.json']
    },

    plugins: [
        new webpack.optimize.CommonsChunkPlugin('shared', 'shared.bundle.js'),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin(),
        new BundleTracker({ path: rootPath, filename: './webpack-stats.json' })
    ]
}

Answer 1

Try this:

var publicPath = 'http://localhost:4000';

module.exports = {
    context: path.join(staticPath, "js"),
    entry: {
        entry1: [
            'webpack-dev-server/client?' + publicPath,
            'webpack/hot/only-dev-server',
            './index.js'
        ],
        entry2: [
            'webpack-dev-server/client?' + publicPath,
            'webpack/hot/only-dev-server',
            './index2.js'
        ],
        /* etc */
    },
    output: {
        filename: "[name].bundle.js",
        path: path.join(staticPath, "js/"),
        publicPath: publicPath + "/static/bundles/"
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                loaders: ['react-hot', 'babel-loader'],
            },
            /* other loaders */
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        /* other plugins */
    ],

    /* these are command line options */
    devServer: {
        port: 4000,
        hot: true
    }
};

I took the webpack config I use for hot loading and mixed in parts of your config. The biggest difference is how the entry file object is structured. I struggled with getting this to work as well for multiple entry files, I got it to work mostly through trial and error.