I'm trying out the multi-piler option in webpack and am following the example at their github. However, I can't seem to understand how I can split out the mon 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 mon file.

I tried the following but it ended up creating an individual bundles of the vendors entry for each pile 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 pilations, my intention is for them to be bundled as a single file which can be shared instead of creating a same bundle for each pilation.

How can I extract the mon chunks out of multiple piler configurations?

I'm trying out the multi-piler option in webpack and am following the example at their github. However, I can't seem to understand how I can split out the mon 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 mon file.

I tried the following but it ended up creating an individual bundles of the vendors entry for each pile 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 pilations, my intention is for them to be bundled as a single file which can be shared instead of creating a same bundle for each pilation.

How can I extract the mon chunks out of multiple piler configurations?

• javascript
• node.js
• webpack

• Carven did you find a solution to this problem ? – Bulkan Commented Jul 4, 2017 at 3:28
• @Bulkan unfortunately, I don't. – Carven Commented Jul 4, 2017 at 6:44
• I've hit this problem as well. Perhaps we need to use dll-plugin ? – Bulkan Commented Jul 4, 2017 at 10:13
• @Bulkan I have tried dll-plugin but it didn't quite work the way I wanted. It is close but still not exactly what I needed. If I remember correctly, one of the problem was tracking the versioning in the meta file. The hash gets changed even though a particular entry is shared and unchanged. – Carven Commented Jul 4, 2017 at 10:17
• 1 I found this article which has helped me create a vendor file. I think the trick for you is to create another chunk that only has react and react-dom. – Bulkan Commented Jul 5, 2017 at 1:47

3 Answers 3

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 piler have no data shared between.

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

The only thing these pilers 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-pilers.

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-piler feature. But I don't think it will share mon chunk(s).

You can extract the shared code into another pilation, and bundle it with DllBundlesPlugin. later consume this DLL via DLLReferencePlugin and add it to your page either manually or via HTMLWebpackPlugin's add-asset-html-webpack-plugin

Bolierplate can be reduced by using autodll-webpack-Plugin

I learned about it now, and this topic seems quite hard to understand in webpack docs. I managed to create something that works, as it created 2 separate files and extracted the mon dependencies to another file.

Here is my webpack config:

{
    entry: {

        pageA: "./first/first",
        pageB: "./second/second"
    },
    output: {
        path: path.join(__dirname, "js"),
        filename: "[name].js"
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            names: ["vendor", "mon"],
        })
    ]
};

the output of this will be:

./js/
    mon.js
    vendor.js
    pageA.js
    pageB.js

I created a repo with the example I worked on: https://github./tzookb/webpack-mon-vendor-chunks

when I open a new html file I load these files:

 first page:
     mon.js
     vendor.js
     pageA.js

 sec page:
     mon.js
     vendor.js
     pageB.js