Webpack: Moving JSON files with the file-loader

Question

Webpack: Moving JSON files with the file-loader

Currently utilizing Webpack's module.loaders and file-loader to duplicate multiple js-files during compilation:

module.loaders = [
    { test: /app\/locale\/moment\/.*\.js$/, loader: "file-loader?name=locale/moment/[name].[ext]" }
];

Successfully achieving the desired result with js-files.
Now aiming to replicate the same process with JSON files:

module.loaders = [
    { test: /app\/locale\/.*\.json$/, loader: "file-loader?name=locale/[name].[ext]" }
];

Encountering issues this time around.
Curious as to why Webpack treats js and json files differently when utilizing the file-loader?

javascript json webpack

Answer 1

Answer №1

This is a modified version of my response to a similar question I had.

To easily move JSON files using file-loader, you can include the following snippet in your Webpack setup:

module: {                                                                    
    rules: [  
    // ...  
    {                                                                        
       test: /\.json$/,                                                       
       loader: 'file-loader?name=[name].json'                                 
    }
    // ...
    ]
}

There are a couple of things to note here: 1) file-loader will only duplicate files that are imported or required in your code, and 2) file-loader provides a path to where the file was loaded, not the actual content of the file.

To replicate a JSON file, you must first import it, like so:

const dataFile = require('../data.json');

As file-loader gives a path to where the file was loaded, dataFile will have the value "/data.json".

You can then access the contents of the JSON file using methods like jsonfile:

jsonfile.readFile(dataFile, function(err, obj) {
    console.log(obj);
});

or utilizing Angular's HTTP package:

http.get(dataFile).map(res => res.json()).catch((error: any): any => {
    // ...
}).subscribe(obj => {
    console.log(obj);
});

Answer 2

This is a modified version of my response to a similar question I had.

To easily move JSON files using file-loader, you can include the following snippet in your Webpack setup:

module: {                                                                    
    rules: [  
    // ...  
    {                                                                        
       test: /\.json$/,                                                       
       loader: 'file-loader?name=[name].json'                                 
    }
    // ...
    ]
}

There are a couple of things to note here: 1) file-loader will only duplicate files that are imported or required in your code, and 2) file-loader provides a path to where the file was loaded, not the actual content of the file.

To replicate a JSON file, you must first import it, like so:

const dataFile = require('../data.json');

As file-loader gives a path to where the file was loaded, dataFile will have the value "/data.json".

You can then access the contents of the JSON file using methods like jsonfile:

jsonfile.readFile(dataFile, function(err, obj) {
    console.log(obj);
});

or utilizing Angular's HTTP package:

http.get(dataFile).map(res => res.json()).catch((error: any): any => {
    // ...
}).subscribe(obj => {
    console.log(obj);
});

Webpack: Moving JSON files with the file-loader

Answer №1

Similar questions

Import and load numerous JSON files into a responsive and visually appealing Bootstrap table

update the element that acts as the divider in a web address (Angular)

Is it possible to obtain the parameters using an empty object with the getStaticPaths function?

"Troubleshooting: Vue JS Axios Post Request Not Passing Data to PHP Server

Obtain the value or values of radio buttons based on certain conditions

Utilizing a variable within an Angular filter: A step-by-step guide

Storing an array of objects in Firestore using JavaScript presents a challenge

Access to this page via the Odesk API in node.js is restricted and unauthorized

Connecting text boxes with JavaScript and JSON for gaming experience

Having trouble with JQuery's append method on the <head> tag?

"Retrieve real-time information from the server directly on the client side

Send information using jQuery AJAX

Tips for utilizing the onload attribute alongside the ng-controller directive to run a function that has been established within the controller

Changing the format of JSON output in Laravel

Issue encountered while attempting to compress tailwindcss

{ 'Name:UniqueRewrite': { token: 738561, number: 2021.8 } }

Looking to update a specific element in an array on an hourly basis?

Utilize JavaScript to extract data from an XML file through a specified

Executing the onSuccess callback in Ajax without any ability to manipulate the ajax requests

Inspect all checkboxes created by JavaScript