Jake Jake - 23 days ago 9
Javascript Question

How can I automatically load all JSON files from a given directory in Webpack?

Edit: There is an existing question about loading multiple files but does not adequately address how to combine JSON files into a single object. See answer below. This question is not a duplicate.

I have a directory with 100 or so JSON files that I want to load into my js app, which is bundled via WebPack.

I could go through the initial pain of writing out the following:

let data = [
// 2 - 98...

But I would much rather grab everything automatically so that I don't have to update my code when I add/remove JSON files to that directory in the future. How can I do this?


Another question details how to load multiple dependencies, but I had to add some extra code to combine my JSON files into a single object. This is the working solution:

// Get filename only.
// Example: './foo.json' becomes 'foo'
function getFileNameOnly(filePath) {
  return filePath.split('/').pop().split('.').shift();

function loadJson() {
  const requireContext = require.context('json!./Mocks', false, /\.json$/);
  const json = {};
  requireContext.keys().forEach((key) => {
    const obj = requireContext(key);
    const simpleKey = getFileNameOnly(key);
    json[simpleKey] = obj;
  return json;

Usage example:

// ./Mocks/99.json
    "name": "ninety nine"

// ./Mocks/foo.json
    "name": "bar"

// App.js
let myJson = loadJson();
console.log(myJson['99']);  // > "Object{name:'ninety nine'}"
console.log(myJson['foo']); // > "Object{name:'bar'}"