如何创建包含多个配置输出的单个 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/@technobogueur/webpack-one-manifest-json-from-multiple-configurations-output-fee48578eb92

您需要的是WebpackManifestPlugin 的种子选项，您必须向其传递一个共享对象（在两种配置中），这是一个基于您的代码的示例：

// 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），但对于输入键，它们应该不同，您可以将其设置为“client”和另一个“client_legacy”，因此在清单 json 中您将拥有类似以下内容：

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