带有清单文件的webpack2 CommonsChunkPlugin，如果minChunks是一个函数，则只生成“names []”数组中的最后一个文件

Question

webpack版本

2.2.1

我正在尝试添加额外的manifest文件，以绕过webpacks运行时代码注入问题并启用缓存：

https://webpack.js.org/guides/code-splitting-libraries/#manifest-file

然而，在将函数传递给minChunks时，在这种情况下 - 为了自动获取vendor.js块中node_modules内的所有文件 - 将导致意外的结果：只有最后一个文件生成数组（在下面的例子中显示）。

webpack.config.js

entry: {
        bundle: "./src/index.tsx",
    },
    output: {
        filename: "[name].js?[chunkhash]",
        path: `${projectRoot}/dist`
    },
    plugins: [new webpack.optimize.CommonsChunkPlugin({
        names: ['vendor', 'manifest'],
        minChunks: function (module) {
            return module.context && module.context.indexOf('node_modules') !== -1;
        }
    })]

预期输出

3个文件：bundle.js，vendor.js和manifest.js

实际输出

2个文件：bundle.js，manifest.js

Answer 1

我观察到，通过上面的配置，webpack v2.2.1将只创建最后一个（即在您的情况下显示），因为它首先认为供应商是＆＃39;捆绑的父母。捆绑和处理...接下来它认为显示为＆＃39;捆绑＆＃39;的父母。捆绑和进程将覆盖以前的处理。最后在生成捆绑时，它会创建两个捆绑包，即＆＃39;捆绑＆＃39; bundle及其parent - manifest bundle。我不确定为什么它与v2.2.1的行为相同。

您可能希望像这样编写配置

 plugins: [new webpack.optimize.CommonsChunkPlugin({
        name: 'vendor',
        chunks: ["bundle"], //optional
        minChunks: function (module) {
            return module.context && module.context.indexOf('node_modules') !== -1;
        }
    }), 
     new webpack.optimize.CommonsChunkPlugin({
      name: "manifest",
      chunks: ["vendor"],
      minChunks: Infinity
    })]

这里的技巧是，使用第一个插件实例，您将从node_modules提取模块到供应商包。由于这是父公共包，因此webpack会将其运行时代码添加到供应商包中（如果未添加插件的第二个实例）。然后使用插件的第二个实例的应用程序，使用minChunks作为Infinity，您将不会提取任何模块，但是您将清单包作为供应商的父包，因此，webpack将其运行时代码添加到清单包中。

您需要确保首先执行清单脚本，然后确保供应商脚本和最终捆绑脚本。换句话说，按顺序加载它们以避免意外错误。