2

网络包版本

2.2.1

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

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

但是,当将函数传递给 minChunks 时,在这种情况下 - 为了自动获取node_modulesvendor.js 块中的所有文件 - 将导致意外结果:只有数组中的最后一个文件(清单,在示例中下面)生成。

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

4

1 回答 1

3

我观察到,使用上面的配置,webpack v2.2.1 将只创建最后一个(即在您的情况下为清单),因为它首先将供应商视为“捆绑”捆绑包和进程的父级......接下来它认为清单为'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 会将其运行时代码添加到清单包中。

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

于 2017-02-27T18:30:49.913 回答