Question

我在webpack中试用了多编译器选项，并在他们的github上跟随example。但是，我似乎无法理解如何在多个配置中拆分公共代码。

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

我尝试了以下操作，但最终为每个编译配置创建了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在两个编译之间共享，我的意图是将它们捆绑为一个文件，可以共享而不是为每个编译创建一个相同的包。

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

Answer 1

简要回答

您无法按照自己的方式完成这项工作。

TL; DR

@Carven，我担心你无法通过Webpack的MultiCompiler实现目标，MultiCompiler并不是为了完成这项工作，至少对于近距离功能而言。

请参阅the source code for initiating the MultiCompiler instance，它实际上启动了单独的Compiler个实例。这些编译器之间没有共享数据。

另请参阅the source of running MultiCompiler instance，编译器实例也单独运行而不共享数据。

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

顺便说一句，the example you mentioned中没有任何线索表明多个编译器之间共享某些模块。

替代

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

其他值得一提的

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

Answer 2

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

可以使用autodll-webpack-Plugin

来减小Bolierplate

Answer 3

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

这是我的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

我使用我工作的示例创建了一个repo：https://github.com/tzookb/webpack-common-vendor-chunks

当我打开一个新的html文件时，我加载了这些文件：

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

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

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

3 个答案:

简要回答

TL; DR

替代

其他值得一提的