# json5-loader

> json5 loader module for webpack

Latest version **4.0.1** (published 2020-10-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install json5-loader
pnpm add json5-loader
yarn add json5-loader
bun add json5-loader
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 4.0.1 |
| Published | 2020-10-09 |
| First published | 2012-07-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 10.13.0 |
| Dependencies | 3 |
| Unpacked size | 10.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 70 |
| Author | Tobias Koppers @sokra |
| Maintainers | d3viant0ne, evilebottnawi, sokra, jhnns, michael-ciniawsky, bebraw, ericclemmons, thelarkinn |
| Keywords | webpack |

## Links

- npm: https://www.npmjs.com/package/json5-loader
- Repository: https://github.com/webpack-contrib/json5-loader
- Issues: https://github.com/webpack-contrib/json5-loader/issues
- Funding: https://opencollective.com/webpack
- npm.io page: https://npm.io/package/json5-loader

## Dependencies (3)

- [json5](https://npm.io/package/json5.md) ^2.1.3
- [loader-utils](https://npm.io/package/loader-utils.md) ^2.0.0
- [schema-utils](https://npm.io/package/schema-utils.md) ^3.0.0

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 4.0.1 (latest) — 2020-10-09
- 2.0.0-beta.0 (beta) — 2017-05-01
- 4.0.0 — 2020-04-15
- 3.0.0 — 2019-06-05
- 2.0.0 — 2019-03-22
- 1.0.1 — 2017-03-05
- 0.6.0 — 2014-11-27
- 0.5.0 — 2013-02-01
- 0.1.1 — 2012-08-03
- 0.1.0 — 2012-07-18

## README

<div align="center">
  <img width="200" height="200"
    src="https://cdn.rawgit.com/json5/json5-logo/master/json5-logo.svg">
  <a href="https://github.com/webpack/webpack">
    <img width="200" height="200"
      src="https://webpack.js.org/assets/icon-square-big.svg">
  </a>
</div>

[![npm][npm]][npm-url]
[![node][node]][node-url]
[![deps][deps]][deps-url]
[![tests][tests]][tests-url]
[![cover][cover]][cover-url]
[![chat][chat]][chat-url]
[![size][size]][size-url]

# json5-loader

A webpack loader for parsing [json5](https://json5.org/) files into JavaScript objects.

## Getting Started

To begin, you'll need to install `json5-loader`:

```sh
$ npm install json5-loader --save-dev
```

You can use the loader either:

- by configuring the `json5-loader` in the `module.rules` object of the webpack configuration, or
- by directly using the `json5-loader!` prefix to the require statement.

Suppose we have the following `json5` file:

**file.json5**

```json5
{
  env: 'production',
  passwordStrength: 'strong',
}
```

**webpack.config.js**

```js
module.exports = {
  module: {
    rules: [
      {
        test: /\.json5$/i,
        loader: 'json5-loader',
        type: 'javascript/auto',
      },
    ],
  },
};
```

## Options

|            Name             |    Type     | Default | Description            |
| :-------------------------: | :---------: | :-----: | :--------------------- |
| **[`esModule`](#esmodule)** | `{Boolean}` | `true`  | Uses ES modules syntax |

### `esModule`

Type: `Boolean`
Default: `true`

There are some cases in which using ES modules is beneficial, like in the case of [module concatenation](https://webpack.js.org/plugins/module-concatenation-plugin/) and [tree shaking](https://webpack.js.org/guides/tree-shaking/).

You can enable a ES module syntax using:

**webpack.config.js**

```js
module.exports = {
  module: {
    rules: [
      {
        test: /\.json5$/i,
        loader: 'json5-loader',
        options: {
          esModule: false,
        },
        type: 'javascript/auto',
      },
    ],
  },
};
```

## Examples

### Usage with require statement loader prefix

**file.json5**

```json5
{
  env: 'production',
  passwordStrength: 'strong',
}
```

**index.js**

```js
import appConfig from 'json5-loader!./file.json5';

console.log(appConfig.env); // 'production'
```

Don't forget to polyfill require if you want to use it in Node.js. See the webpack documentation.

## Contributing

Please take a moment to read our contributing guidelines if you haven't yet done so.

[CONTRIBUTING](./.github/CONTRIBUTING.md)

## License

[MIT](./LICENSE)

[npm]: https://img.shields.io/npm/v/json5-loader.svg
[npm-url]: https://npmjs.com/package/json5-loader
[node]: https://img.shields.io/node/v/json5-loader.svg
[node-url]: https://nodejs.org
[deps]: https://david-dm.org/webpack-contrib/json5-loader.svg
[deps-url]: https://david-dm.org/webpack-contrib/json5-loader
[tests]: https://github.com/webpack-contrib/json5-loader/workflows/json5-loader/badge.svg
[tests-url]: https://github.com/webpack-contrib/json5-loader/actions
[cover]: https://codecov.io/gh/webpack-contrib/json5-loader/branch/master/graph/badge.svg
[cover-url]: https://codecov.io/gh/webpack-contrib/json5-loader
[chat]: https://img.shields.io/badge/gitter-webpack%2Fwebpack-brightgreen.svg
[chat-url]: https://gitter.im/webpack/webpack
[size]: https://packagephobia.now.sh/badge?p=json5-loader
[size-url]: https://packagephobia.now.sh/result?p=json5-loader

---
_Source: https://npm.io/package/json5-loader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._