How to load static JSON file in Webpack

Loading static JSON files in Webpack is typically a straightforward process, as Webpack natively supports loading and parsing JSON files. Webpack introduced built-in support for JSON imports in version 2 and above, which simplifies the process. Below, I'll outline the steps to load static JSON files in Webpack and illustrate with a concrete example.

Steps

1. Create a JSON file: First, you need to create a JSON file, for example, data.json, and populate it with relevant data.

json
{
  "name": "ChatGPT",
  "type": "AI"
}

1. Import the JSON file: In Webpack, you can import JSON files just like other modules. Ensure your Webpack version is 2 or higher, so you don't need any special loaders to handle JSON files.

javascript
import data from './data.json';

This line imports the entire content of data.json into the variable data, which can be used just like any other plain JavaScript object.

1. Use the JSON data: After importing the JSON data, you can use it anywhere in your application as needed.

javascript
console.log(data.name);  // Output: ChatGPT

Example

Suppose we're developing a simple web application that needs to read configuration information from a static JSON file.

Directory Structure:

shell
.
├── src
│   ├── index.js
│   └── config.json
├── webpack.config.js
└── package.json

config.json:

json
{
  "apiUrl": "https://api.example.com",
  "timeout": 5000
}

index.js:

javascript
import config from './config.json';

function fetchData() {
  fetch(config.apiUrl, { timeout: config.timeout })
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error fetching data:', error));
}

fetchData();

webpack.config.js:

javascript
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
};

In this example, Webpack automatically handles the import of JSON files, allowing developers to directly use this data for API requests and other operations. This effectively separates configuration information from application logic, enhancing code modularity and maintainability.