Import a fixed JSON document in Webpack

Question

Import a fixed JSON document in Webpack

In the code I have, there is a construction that looks like this:

var getMenu = function () {
    return window.fetch("portal/content/json/menu.json").then(function (data) {
        return data.json();
    });
};

I attempted the following in my webpack.config.js:

module: {
    loaders: [
        ...
        {
            test: /\.json$/,
            exclude: /node_modules/,
            use: [
                'file-loader?name=[name].[ext]&outputPath=portal/content/json'
            ]
        },
        ...
   ]
}

How the project is structured:

dist
  content
     json
        menu.json <- not found here

src
  content
     json
       menu.json <- original file

The Question:

Is there a way for webpack to move src/content/json/menu.json to dist/content/json/menu.json ?

javascript angularjs json webpack

Answer 1

Answer №1

When making a request for a JSON file using fetch, the retrieval only takes place at runtime. It's important to note that webpack will only process items that are explicitly imported. This means that if webpack started handling arguments passed to functions, it would confuse those arguments as modules and disrupt the functionality of the function.

To trigger your loaders, you can simply import the file into your project:

import './portal/content/json/menu.json';

An alternative approach is to directly import the JSON data instead of fetching it at runtime. With Webpack 2, the default loader for .json files is json-loader. By removing the .json rule, you can import the JSON like this:

import menu from './portal/content/json/menu.json';

The variable menu now contains the same JavaScript object that your getMenu function would return.

Answer 2

When making a request for a JSON file using fetch, the retrieval only takes place at runtime. It's important to note that webpack will only process items that are explicitly imported. This means that if webpack started handling arguments passed to functions, it would confuse those arguments as modules and disrupt the functionality of the function.

To trigger your loaders, you can simply import the file into your project:

import './portal/content/json/menu.json';

An alternative approach is to directly import the JSON data instead of fetching it at runtime. With Webpack 2, the default loader for .json files is json-loader. By removing the .json rule, you can import the JSON like this:

import menu from './portal/content/json/menu.json';

The variable menu now contains the same JavaScript object that your getMenu function would return.

Answer 3

Answer №2

If you want your JSON to be loaded at runtime or deferred, you can utilize the fantastic dynamic imports feature in webpack:

import(
    /* webpackChunkName: "json_menu" */
    './portal/content/json/menu.json'
);

This will result in a Promise that resolves to the module object, with the "default" field containing your data. Here's an example using ES6 syntax:

import(
    /* webpackChunkName: "json_menu" */
    './portal/content/json/menu.json'
).then(({default: jsonMenu}) => {
    // Manipulate the "jsonMenu" variable as needed
    console.log('My menu:', jsonMenu);
});

Keep in mind that dynamic imports require the Babel plugin syntax-dynamic-import, which can be installed via npm:

npm install babel-plugin-syntax-dynamic-import --save-dev

Answer 4

If you want your JSON to be loaded at runtime or deferred, you can utilize the fantastic dynamic imports feature in webpack:

import(
    /* webpackChunkName: "json_menu" */
    './portal/content/json/menu.json'
);

This will result in a Promise that resolves to the module object, with the "default" field containing your data. Here's an example using ES6 syntax:

import(
    /* webpackChunkName: "json_menu" */
    './portal/content/json/menu.json'
).then(({default: jsonMenu}) => {
    // Manipulate the "jsonMenu" variable as needed
    console.log('My menu:', jsonMenu);
});

Keep in mind that dynamic imports require the Babel plugin syntax-dynamic-import, which can be installed via npm:

npm install babel-plugin-syntax-dynamic-import --save-dev

Import a fixed JSON document in Webpack

Answer №1

Answer №2

Similar questions

Encountering a problem when extracting a nested object value from JSON using GSON

Combining numerous objects into one object within an array, each with distinct keys, and displaying them using FlatList

I provided Array.Filter with a function instead of a predicate, and surprisingly it gave back the entire array. How is that possible?

Is there a way I can appropriately display an image in a specific size box?

Utilizing Nuxt3's auto-import feature alongside Eslint

Angular dropdown menu with 2 options

Is there a way to incorporate a CSS file into this without explicitly mentioning the color?

Retrieving text from a JSON variable located between two specific strings, especially if the second string appears multiple times

Populate HTML dropdown menu with data from an external JSON file

Show alerts that automatically disappear after a set amount of time

How can I implement code splitting in a React single page application?

Steps for ordering by a JSON attribute:

Deciphering the method to retain added text

Can anyone please guide me on how to extract the IP address of a specific individual using Node.js?

The for loop does not pause for asynchronous code to complete

Utilizing jQuery AJAX to Send an HTML Array to PHP

Creating dynamic templates in AngularJS using ng-include and custom template directivesHow to implement dynamic

Updating object values within a while loop using JavaScript

Wait for NodeJS to finish executing the mySQL query

What is the reason for including parentheses when evaluating JSON data?