将 JSON 捆绑为带有 Webpack 的普通 JSON 文件

Question

I have a web-app that requires a configuration JSON file which contains end-points and other required start-up parameters.

If I use the json-loader, the file is not "real json", it'll look something like this:

module.exports = {
    "name": "foo",
    "key": true,
};

What I would like is plain old JSON which means it can be parsed and changed as part of a deployment process before being sent to the web server where it will be served from.

An alternative is to use the file-loader. However, that means that (even though it's a trivial task) I have to write the code to download the file myself. I would like to have webpack handle this and be available.

Is there a way that I can require a JSON file, which is written as a plain-old JSON file and imported at run time?

Answer 1

Is there a way that I can require a JSON file, which is written as a plain-old JSON file and imported at run time?

Webpack acts on compile-time. That means when you require a file, it loads that file, performs modifications as specified by the loader-chain and exports you the final result from that chain. So what you're asking for sounds like a loader, that acts like a file-loader, but exports an IIFE that returns a promise for the required file.

In theory it's possible to have a webpack loader, lets say an async-file-loader that gets the input from the file-loader will handle the async requst for you. Let's assume something like:

const promisedFile = require('async-file-loader!file-loader!./myJson.json');
promisedFile.then(file => { console.log(JSON.parse(file)); });

But then the whole logic for handling the request would be boundled within that call. The async-file-loader would look something like this:

module.exports = function(source) {
    return `module.exports = eval("(function(url){
      /* define async request func, preform request and return promise in here */
   })(${url})")`;
}

Pretty nasty...

When you want to load your json-file in runtime, I'll see 2 options:

1. use the file-loader and request the json file asyncronously on your own.
2. use a server-sided scripting language and inject the config into the .html file. If your're using nodejs and express for example on your backend side, you could easily inject the config using Cheerio before serving the request.

Answer 2

As ShabbY said above, Webpack is a module bundler and compiles your files ahead of time.

It sounds like you need to add a configuration file (json) after build time to be accessed at runtime. For this, a solution would be to load the file using a normal ajax call rather than attempting to bundle it with Webpack.

Answer 3

I am looking to solve same problem and avoid building react app for each environment.

Since this answer is 4 years old, Just want to check if there is a better way to handle this with webpack 5 (latest version).

instead of using file-loader and request the json file asynchronously on your own.

how about webpack dynamic import with file-loader