在webpack中的多个编译器配置中提取常见块？

Question

我正在尝试webpack中的多编译器选项,并在他们的github上关注这个例子.但是,我似乎无法理解如何在多个配置中拆分公共代码.

例如,我可能在不同的配置集中使用相同的供应商库.我想将这些共享代码捆绑到一个公共文件中.

我尝试了以下内容,但最终vendors为每个编译配置创建了一个单独的条目包.

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

由于react,react-dom在2个编译之间共享,我的意图是将它们捆绑为单个文件,可以共享而不是为每个编译创建相同的包.

如何从多个编译器配置中提取公共块？

Answer 1

简要回答

你不能按照你想要的方式完成这项工作。

长话短说

@Carven，恐怕你无法通过MultiCompilerWebpack 实现你的目标，MultiCompiler并不意味着要做这项工作，至少对于近期的功能来说。

查看启动MultiCompiler实例的源代码，它实际上启动了单独的Compiler实例。这些编译器之间没有共享数据。

另请参阅运行 MultiCompiler 实例的来源，编译器实例也是单独运行而不共享数据。

这些编译器唯一共享的是Stats它们生成并合并到MultiStats.

顺便说一句，您提到的示例中没有任何线索表明某些模块是在多编译器之间共享的。

选择

正如 @Tzook-Bar-Noy 所描述的，恕我直言，您必须使用多条目来实现 MPA（多页面应用程序）捆绑。

其他值得一提的

我注意到一个名为webpack-multi-configurator 的库正在使用多编译器功能。但我不认为它会共享公共块。