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.

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.

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.

However It looks like webpack isn't playing nice with passing a variable into the require statement. Do you need to load the json based on a variable name?

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.