javascript - 带有 list 文件的 webpack2 CommonsChunkPlugin，如果 minChunks 是一个函数，则只生成 "names[]"数组中的最后一个文件

Question

webpack版本

2.2.1

我正在尝试添加一个额外的 manifest 文件以绕过 webpacks 运行时代码注入(inject)问题并启用缓存:

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

然而，当将函数传递给 minChunks 时，在这种情况下 - 为了自动获取 vendor.js block 内 node_modules 中的所有文件 - 将导致意想不到的结果:只有生成数组中的最后一个文件( list ，在下面的示例中)。

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 将只创建最后一个(即在您的情况下为 list )，因为它首先将 vendor 视为“捆绑” bundle 和流程的父级......接下来认为 list 是“bundle”包和进程的父级，这将覆盖以前的处理。最后在生成包时，它创建了两个包，'bundle' 包和它的父 - list 包。我不确定为什么 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 中提取模块到 vendor bundle。由于这是父公共(public)包，webpack 会将其运行时代码添加到 vendor 包中(如果未添加插件的第二个实例)。然后应用插件的第二个实例，使用 minChunks 作为 Infinity，你不会提取任何模块，但你会将 list 包作为 vendor 的父包，因此，webpack 会将其运行时代码添加到 list 包中。

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