0
# JSON Loader
1

2
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.
3

4
## Package Information
5

6
- **Package Name**: json-loader
7
- **Package Type**: npm
8
- **Language**: JavaScript
9
- **Installation**: `npm install --save-dev json-loader`
10

11
## Core Imports
12

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

15
## Architecture
16

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

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

25
## Basic Usage
26

27
### Webpack Configuration (Recommended)
28

29
**Webpack 2.x+ (Modern):**
30

31
```javascript
32
// webpack.config.js
33
module.exports = {
34
  module: {
35
    rules: [
36
      {
37
        test: /\.json$/,
38
        use: 'json-loader'
39
      }
40
    ]
41
  }
42
}
43
```
44

45
**Webpack 1.x (Legacy):**
46

47
```javascript
48
// webpack.config.js
49
module.exports = {
50
  module: {
51
    loaders: [
52
      {
53
        test: /\.json$/,
54
        loader: 'json-loader'
55
      }
56
    ]
57
  }
58
}
59
```
60

61
Then import JSON files directly:
62

63
```javascript
64
const data = require('./file.json');
65
// or with ES6 imports
66
import data from './file.json';
67
```
68

69
### Inline Usage
70

71
```javascript
72
const json = require('json-loader!./file.json');
73
```
74

75
## Capabilities
76

77
### JSON Module Loading
78

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

81
```javascript { .api }
82
/**
83
 * JSON Loader function - processes JSON content and returns CommonJS module
84
 * @param {string|*} source - The content of the JSON file being processed
85
 * @returns {string} JavaScript module code that exports the JSON data
86
 * @context webpack loader context (this.cacheable available if supported)
87
 */
88
module.exports = function (source) {
89
  // Enables caching if supported by webpack
90
  if (this.cacheable) this.cacheable();
91
  
92
  // Parse JSON if source is string, otherwise use as-is
93
  var value = typeof source === "string" ? JSON.parse(source) : source;
94
  
95
  // Stringify and escape problematic Unicode characters
96
  value = JSON.stringify(value)
97
    .replace(/\u2028/g, '\\u2028')  // Line separator
98
    .replace(/\u2029/g, '\\u2029'); // Paragraph separator
99
  
100
  // Return as CommonJS module
101
  return `module.exports = ${value}`;
102
};
103
```
104

105
## Processing Details
106

107
### Unicode Character Handling
108

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

111
- **\\u2028** (Line Separator): Could terminate statements unexpectedly
112
- **\\u2029** (Paragraph Separator): Could terminate statements unexpectedly
113

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

116
### Caching Support
117

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

120
### Input Flexibility
121

122
The loader accepts both:
123
- **String input**: Parses as JSON using `JSON.parse()`
124
- **Object input**: Uses directly without parsing (for pre-parsed content)
125

126
## Notes
127

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