如何创建包含多个配置输出的单个Webpack清单

Question

我有一个webpack配置，它导出两个配置对象，以便为当前和旧版浏览器从同一源文件生成多个构建。为了在服务器上进行渲染，我使用webpack-manifest-plugin为每个构建生成一个清单。

// webpack.config.js
const client = {
entry: {
client: './src/client.js',
},
//...webpack config for modern browsers
plugins: [
new ManifestPlugin({
fileName: '../manifest-client.json',
}),
],
}
const legacy = {
entry: {
client: './src/client.js',
},
//...webpack config for older browsers
plugins: [
new ManifestPlugin({
fileName: '../manifest-legacy.json',
}),
],
}
module.exports = [client, legacy]

这还可以，但理想情况下，我希望有一个包含这两个清单的单一清单。

有没有一种方法比启动服务器时只读取两个文件更简单？

// server.js
const assets = {
client: JSON.parse(fs.readFileSync('./build/manifest-client.json')),
legacy: JSON.parse(fs.readFileSync('./build/manifest-legacy.json')),
}

Answer 1

我在这里写了一篇关于这个主题的文章https://medium.com/@technoblogueur/webpack-on-manifest-json-from-multiple-configurations-output-fee48578eb92

您需要的是WebpackManifestPluin的种子选项，您必须将共享对象传递给它(在两种配置中(，下面是一个基于您的代码的示例：

// webpack.config.js
var sharedObj = {};
const client = {
entry: {
client: './src/client.js',
},
//...webpack config for modern browsers
plugins: [
new ManifestPlugin({
fileName: '../manifest.json',
seed: sharedObj
}),
],
}
const legacy = {
entry: {
client_lagacy: './src/client_lagacy.js',
},
//...webpack config for older browsers
plugins: [
new ManifestPlugin({
fileName: '../manifest.json',
seed: sharedObj
}),
],
}
module.exports = [client, legacy]

如果你使用CleanWebpackPlugin，你也需要小心，因为绑定的顺序是从右到左的(在这里谈论导出的数组(，所以正如我在帖子中提到的，将CleanWebpackPlugin放在最后一个配置中应该是安全的。

更新

上面的代码片段是正确的(如注释中所述(，因为您正在写入同一个清单，清单文件名应该是相同的(manifest.json(，但对于条目键，它们应该是不同的，您可以将其中一个设置为"；客户端"；而另一个"；客户端空闲"；因此，在manifestjson中，您将得到如下内容：

{
"client_legacy": "client_legacy.[someHash].js",
"client": "client.[someHash].js"
}