I have a large block of JSON I need to be available in my webpart, a 'canned' search result used when in the workbench and not connected to SharePoint.

Ideally I would like to reference it as follows:

const queryText = 'example';
const data = require(`json!./${queryText}.json`);

How do I get it packaged into the web part using webpack?

  • Does it have to be a require? Can't you merge it into your code with M4 or some Gulp plugin? Aug 23, 2016 at 18:54

1 Answer 1


So maybe I'm not quite reading the question correctly, but here is all I did.

  1. Put a sample.json file in the src/webpart directory
  2. Put var sample:any = require('sample');

In my code, and that populates the sample variable with the json object.

Now, in order to get this to work where you specify the name with a variable, you need to do something a little bit different.

  1. Create a folder in the src/webpart directory. Let's call it JSON
  2. Stick all your json files in there
  3. Load them via var simple:any = require('json/'+ queryText);

Webpack tries to be smart and bundle all the files it needs, but when it sees a variable rather than a literal, it doesn't really know what to bundle, so it basically bundles a bunch of stuff that it shouldn't, including stuff that isn't valid js, and your bundle is hosed. By putting it into a folder, it scopes down the things that it adds to the bundle, and everything is good.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.