Javascript 在webpack中的多个编译器配置中提取公共块？

我正在webpack中尝试多编译器选项，并在他们的github上遵循这些选项。然而，我似乎不明白如何在多个配置中分离出公共代码

例如，我可能在不同的配置集中使用相同的供应商库。我希望将这些共享代码绑定到一个公共文件中

我尝试了以下方法，但它最终为每个编译配置创建了一个单独的

供应商

条目包

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在两个编译之间共享，因此我的目的是将它们绑定为一个可以共享的文件，而不是为每个编译创建相同的绑定

---

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

我现在了解了它，在webpack文档中，这个主题似乎很难理解。我设法创建了一些有用的东西，因为它创建了两个独立的文件，并将公共依赖项提取到另一个文件中

这是我的网页配置：

{
    entry: {

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

其输出将为：

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

我创建了一个回购协议，我的例子如下：

打开新的html文件时，我会加载以下文件：

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

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

简要答复 你不能以你想要的方式做那项工作。

TL；博士 @卡文，我担心你不能通过网页的

MultiCompiler

来实现你的目标，

MultiCompiler

并不是用来做那项工作的，至少在最近的功能上是这样

请参阅，它实际上会启动单独的

编译器

实例。这些编译器之间没有共享的数据

另请参见，编译器实例也单独运行，不共享数据

这些编译器共享的唯一东西是它们生成的

Stats

实例，并合并成一个

MultiStats

顺便说一句，没有线索表明某些模块是在多个编译器之间共享的

可供替代的 正如@Tzook Bar Noy，IMHO所描述的，您必须使用多个条目来实现MPA（多页面应用程序）绑定

其他值得一提的

---

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

您可以将共享代码提取到另一个编译中，并将其与DllBundlesPlugin捆绑在一起。 稍后通过DLLReferencePlugin使用此DLL，并手动或通过HTMLWebpackPlugin将其添加到页面中

---

使用卡文可以减少Bolierplate。你找到这个问题的解决方案了吗？@Bulkan不幸的是，我没有。我也遇到了这个问题。也许我们需要使用？@Bulkan我已经尝试了dll插件，但它没有完全按照我想要的方式工作。这很接近，但仍然不是我所需要的。如果我没记错的话，其中一个问题是跟踪元文件中的版本控制。即使某个特定条目被共享且未更改，哈希也会更改。我发现这有助于我创建一个供应商文件。我认为你的窍门是创建另一个块，它只有

react

和

react dom

。谢谢你的回答，但是你的网页配置没有使用该功能。你不必有一个配置数组。这是如何提取公共库。对于您所请求的内容，该作业已完成，它将编译多个文件，因此问题特别与配置数组相关。在我的例子中，我需要使用一个配置对象数组，因为输出路径是根据条目文件更改的。@Bulkan好的，那么你的最终目标是什么？你想实现什么？我的目标是我想回答上面最初的问题。