带有清单文件的 webpack2 CommonsChunkPlugin,如果 minChunks 是一个函数,则只生成 "names[]" 数组中的最后一个文件
webpack2 CommonsChunkPlugin with manifest file, only generates the last file in the "names[]" array if minChunks is a function
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
我观察到,使用上面的配置,webpack v2.2.1 将只创建最后一个(即在您的情况下为 manifest),因为它首先将 vendor 视为 'bundle' bundle 和 process 的父级。 .. 接下来它认为清单是 'bundle' 包和进程的父级,这将覆盖之前的处理。最后在生成包时,它创建了两个包,'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 会将其运行时代码添加到清单包中。
您需要确保首先执行清单脚本,然后执行供应商脚本,最后执行捆绑脚本。换句话说,顺序加载它们以避免意外错误。
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
我观察到,使用上面的配置,webpack v2.2.1 将只创建最后一个(即在您的情况下为 manifest),因为它首先将 vendor 视为 'bundle' bundle 和 process 的父级。 .. 接下来它认为清单是 'bundle' 包和进程的父级,这将覆盖之前的处理。最后在生成包时,它创建了两个包,'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 会将其运行时代码添加到清单包中。
您需要确保首先执行清单脚本,然后执行供应商脚本,最后执行捆绑脚本。换句话说,顺序加载它们以避免意外错误。