Extracting common chunks amongst multiple compiler configurations in webpack?

Question

I'm trying out the multi-compiler option in webpack and am following the example at their github. However, I can't seem to understand how I can split out the common code amongst the multiple configurations.

For example, I may have same vendor libraries used in the different set of configurations. I would like to have these shared codes to be bundled to one single common file.

I tried the following but it ended up creating an individual bundles of the vendors entry for each compile configuration.

var path = require("path");
var webpack = require("webpack");
module.exports = [
    {
        name: "app-mod1",
        entry: {
            vendors: ['jquery', 'react', 'react-dom'],
            pageA: ['./mod1/pageA'],
            pageB: ['./mod1/pageB']
        },
        output: {
            path: path.join(__dirname, "/mod1/js"),
            filename: "[name].bundle.js"
        },
        plugins: [
            new webpack.optimize.CommonsChunkPlugin({
                names: ['vendors'],
                minChunks: Infinity
            })
        ]
    },
    {
        name: "app-mod2",
        entry: {
            vendors: ['lodash', 'react', 'react-dom'],
            pageA: ['./mod2/pageA'],
            pageB: ['./mod2/pageB']
        },
        output: {
            path: path.join(__dirname, "/mod2/js"),
            filename: "[name].bundle.js"
        },
        plugins: [
            new webpack.optimize.CommonsChunkPlugin({
                names: ['vendors'],
                minChunks: Infinity
            })
        ]
    }
];

Since react, react-dom are shared between the 2 compilations, my intention is for them to be bundled as a single file which can be shared instead of creating a same bundle for each compilation.

How can I extract the common chunks out of multiple compiler configurations?

Answer 1

Brief answer

You can't do that job in the way you want.

TL;DR

@Carven, I am afraid that you can't achieve your goal via MultiCompiler of Webpack, MultiCompiler is not meant to do that job, at least for the near feature.

See the source code for initiating the MultiCompiler instance, it actually initiates separate Compiler instances. These compiler have no data shared between.

See also the source of running MultiCompiler instance, the compilers instance also run separately without sharing data.

The only thing these compilers share is the Stats instance they produce and merge into a MultiStats.

By the way, there is no clue in the example you mentioned that some modules are shared between multi-compilers.

Alternative

As described by @Tzook-Bar-Noy, IMHO, you have to use muti-entries to achieve MPA(Multi-page Application) bundling.

Other worth mentioning

I noticed a library called webpack-multi-configurator is using the multi-compiler feature. But I don't think it will share common chunk(s).