如何使用 Webpack 将所有子目录中的 JSON 文件合二为一？答案

【问题标题】：How to use Webpack to combine JSON files from all subdirectories into one?如何使用 Webpack 将所有子目录中的 JSON 文件合二为一？
【发布时间】：2017-09-22 07:00:47
【问题描述】：

假设我有一个结构如下的目录：

1. folder A
  1a. some_file.js
  1b. data.json
2. folder B
  2a. folder B1
     2a1. other_file.json
     2a2. data.json
  2b. folder B2
     2b1. data.json
3. output.json

有没有一个webpack loader可以在所有子文件夹中组合data.json，输出到output.json？

我发现https://www.npmjs.com/package/json-files-merge-loader 似乎做了类似的事情，但它似乎要求提供data.json 的每条路径，而我需要通过data.json 的所有文件夹和子文件夹的东西。所有data.json 键都是唯一的，我希望output.json 成为一个JSON 对象，其中包含来自所有data.json 的所有键/值对。

【问题讨论】：

请注意，webpack 并不擅长动态包含模块。它是为显式包含模块而构建的。您可能需要考虑使用您的构建系统来组合这些文件。
@GJK 关于如何在构建中执行此操作的任何建议？

标签： json webpack webpack-dev-server

【解决方案1】：

webpack 并不真正适合您的用例。很多人认为 webpack 可以替代构建系统，但它只是一个模块打包器，并不能处理所有任务。具体来说：

webpack 遍历 require() 和 import 语句，这意味着它需要静态定义模块。可能通过编写插件或使用从模板生成的文件来解决这个问题，但即使你这样做了......
webpack 很难以您想要的方式组合 JSON 文件。 webpack 擅长将文件捆绑到某种模块系统（CommonJS 或 AMD）中。您想要的不是包含模块的包，而是包含任意内容的文件。

webpack 或许可以使用一些花哨的插件来完成这些事情，但这可能不值得。在您的情况下，您可能只想编写一个 Node 脚本。如果需要，您可以在构建之前使用plugin like this 运行代码。

const fs = require('fs');
// https://github.com/isaacs/node-glob
const glob = require('glob');

const output = {};

glob('src/**/*.json', (error, files) => {
    files.forEach((filename) => {
        const contents = JSON.parse(fs.readFileSync(filename, 'utf8'));
        Object.assign(output, contents);
    });

    fs.writeFileSync('output.json', JSON.stringify(output));
});

【讨论】：

【解决方案2】：

有没有一个webpack loader可以把所有子文件夹中的data.json组合起来，输出到output.json？

使用merge-webpack-plugin。

这与在构建之前运行代码不同。因为深度 webpack 集成允许在热重载时跟踪文件更改并立即更新结果：

MergePlugin = require("merge-webpack-plugin");
module.exports = {
  module: {
    rules: [
      {
        test: /\.(json)$/i,
        use: [
          MergePlugin.loader()
        ]
      }
    ]
  },
  plugins: [
    new MergePlugin({
      search: './src/**/*.json',
    })
  ]
}

如果您的项目中的所有文件夹只需要一个目标文件output.json，请在search 参数中描述它们，仅此而已
如果您需要为每个顶级文件夹（output_A.json、output_B.json ...）连接单独的文件，则：
- 如果您不需要通过子文件夹查找，请尝试使用值为 [path] 的组参数 - 阅读有关分组的更多信息
- 如果您需要通过每个文件夹及其子文件夹连接所有文件，您需要为每个顶级文件夹创建多个插件实例；但您可以按名称或分机对每个插件实例中的文件进行分组（请参阅分组）

还有一些more

【讨论】：

【解决方案3】：

@dee 请检查这个插件 https://www.npmjs.com/package/merge-jsons-webpack-plugin

您可以将文件/模式数组作为输入传递，它会将单个文件作为 json 发出。

【讨论】：

【解决方案4】：

我的multi-json-loader 在这里可能会有所帮助。它接受一个 glob 并将文件组合成一个 JSON blob，同时还在输出对象中保留相对路径。

即dirA/a.json、dirB/b.json和dirB/c.json得到输出为

{
  "dirA": {
    "a": /*parsed contents of a.json*/
  },
  "dirB": {
    "b": /*parsed contents of b.json*/,
    "c": /*parsed contents of b.json*/
  }
}

【讨论】：