webpack - 如何创建包含多个配置输出的单个 Webpack list ？

Question

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

// 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]

这工作正常，但理想情况下我希望有一个包含这两个 list 的 list 。

有没有一种方法可以比启动服务器时读取两个文件更简单地实现此目的？

// 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-one-manifest-json-from-multiple-configurations-output-fee48578eb92

您需要的是 WebpackManifestPlugin 的 seed 选项，您必须向其传递一个共享对象(在两种配置中)，以下是基于您的代码的示例:

// 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 放入应该是安全的最后的配置。

更新

上面的代码片段已更正(如评论中所述)，因为您正在写入相同的 list ， list 文件名应该相同(manifest.json)，但是对于输入键，它们应该不同，您可以将其中一个设置为“client”，另一个设置为“client_legacy”，这样在 list json 中您将看到如下内容:

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