JSON Loader

JSON Loader is a webpack loader that enables importing JSON files as JavaScript modules. It processes JSON content and returns it as a CommonJS module, handling special Unicode characters that could cause issues in JavaScript strings.

Package Information

• Package Name: json-loader
• Package Type: npm
• Language: JavaScript
• Installation: npm install --save-dev json-loader

Core Imports

JSON Loader is a webpack loader, not a direct module import. It's used through webpack configuration or inline loader syntax.

Architecture

JSON Loader operates as a webpack loader in the webpack build pipeline:

• Loader Function: Processes JSON files during webpack compilation
• Webpack Integration: Hooks into webpack's module loading system
• Processing Pipeline: JSON parsing → Unicode escaping → CommonJS module generation
• Caching Layer: Integrates with webpack's caching system for build performance
• Legacy Support: Provides explicit JSON handling for webpack 1.x and custom extensions

Basic Usage

Webpack Configuration (Recommended)

Webpack 2.x+ (Modern):

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.json$/,
        use: 'json-loader'
      }
    ]
  }
}

Webpack 1.x (Legacy):

// webpack.config.js
module.exports = {
  module: {
    loaders: [
      {
        test: /\.json$/,
        loader: 'json-loader'
      }
    ]
  }
}

Then import JSON files directly:

const data = require('./file.json');
// or with ES6 imports
import data from './file.json';

Inline Usage

const json = require('json-loader!./file.json');

Capabilities

JSON Module Loading

Transforms JSON files into JavaScript modules that can be imported and used in webpack bundles.

/**
 * JSON Loader function - processes JSON content and returns CommonJS module
 * @param {string|*} source - The content of the JSON file being processed
 * @returns {string} JavaScript module code that exports the JSON data
 * @context webpack loader context (this.cacheable available if supported)
 */
module.exports = function (source) {
  // Enables caching if supported by webpack
  if (this.cacheable) this.cacheable();
  
  // Parse JSON if source is string, otherwise use as-is
  var value = typeof source === "string" ? JSON.parse(source) : source;
  
  // Stringify and escape problematic Unicode characters
  value = JSON.stringify(value)
    .replace(/\u2028/g, '\\u2028')  // Line separator
    .replace(/\u2029/g, '\\u2029'); // Paragraph separator
  
  // Return as CommonJS module
  return `module.exports = ${value}`;
};

Processing Details

Unicode Character Handling

The loader specifically handles two Unicode characters that can break JavaScript:

• \u2028 (Line Separator): Could terminate statements unexpectedly
• \u2029 (Paragraph Separator): Could terminate statements unexpectedly

These characters are escaped to \\u2028 and \\u2029 respectively to prevent JavaScript parsing issues.

Caching Support

The loader calls this.cacheable() when available to enable webpack's caching mechanism, improving build performance for unchanged JSON files.

Input Flexibility

The loader accepts both:

• String input: Parses as JSON using JSON.parse()
• Object input: Uses directly without parsing (for pre-parsed content)

Notes

• Webpack v2.0.0+: Native JSON support makes this loader optional for standard .json files
• Custom Extensions: Still useful for custom JSON file extensions or special processing needs
• Build Integration: Designed specifically for webpack build pipelines
• No Dependencies: Lightweight implementation using only built-in JavaScript functionality