在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).

Answer 2

You can extract the shared code into another compilation, 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

Answer 3

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 common 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", "common"],
        })
    ]
};

the output of this will be:

./js/
    common.js
    vendor.js
    pageA.js
    pageB.js

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

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

 first page:
     common.js
     vendor.js
     pageA.js

 sec page:
     common.js
     vendor.js
     pageB.js