# raw-loader

> A loader for webpack that allows importing files as a String

Latest version **4.0.2** (published 2020-10-09) · MIT license · 4.3M weekly downloads

## Install

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

## Health

**Score 35/100 (D)** — status: abandoned.

Positive: high downloads; no vulnerabilities.

Warnings: no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 4.0.2 |
| Published | 2020-10-09 |
| First published | 2012-03-26 |
| Weekly downloads | 4.3M |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 10.13.0 |
| Dependencies | 2 |
| Unpacked size | 9.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 840 |
| Author | Tobias Koppers @sokra |
| Maintainers | d3viant0ne, evilebottnawi, sokra, jhnns, michael-ciniawsky, bebraw, ericclemmons, thelarkinn |
| Keywords | webpack |

## Links

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

## Dependencies (2)

- [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

- [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
- [@vivo-minigame/cli-packager](https://npm.io/package/@vivo-minigame/cli-packager.md) — 956 weekly downloads

## Recent versions

- 4.0.2 (latest) — 2020-10-09
- 1.0.0-beta.0 (beta) — 2017-10-02
- 4.0.1 — 2020-04-15
- 4.0.0 — 2019-11-25
- 3.1.0 — 2019-07-18
- 3.0.0 — 2019-06-05
- 2.0.0 — 2019-03-18
- 1.0.0 — 2018-12-10
- 0.5.1 — 2014-01-23
- 0.5.0 — 2013-02-01
- 0.2.0 — 2012-09-25
- 0.1.6 — 2012-05-20
- 0.1.5 — 2012-04-05
- 0.1.4 — 2012-04-03
- 0.1.3 — 2012-04-03
- … 3 more at https://npm.io/package/raw-loader/versions

## README

<div align="center">
  <img width="200" height="200"
    src="https://cdn3.iconfinder.com/data/icons/lexter-flat-colorfull-file-formats/56/raw-256.png">
  <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]
[![coverage][cover]][cover-url]
[![chat][chat]][chat-url]
[![size][size]][size-url]

# raw-loader

A loader for webpack that allows importing files as a String.

## Getting Started

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

```console
$ npm install raw-loader --save-dev
```

Then add the loader to your `webpack` config. For example:

**file.js**

```js
import txt from './file.txt';
```

**webpack.config.js**

```js
// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.txt$/i,
        use: 'raw-loader',
      },
    ],
  },
};
```

And run `webpack` via your preferred method.

## Options

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

### `esModule`

Type: `Boolean`
Default: `true`

By default, `raw-loader` generates JS modules that use the ES modules syntax.
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 CommonJS module syntax using:

**webpack.config.js**

```js
module.exports = {
  module: {
    rules: [
      {
        test: /\.txt$/i,
        use: [
          {
            loader: 'raw-loader',
            options: {
              esModule: false,
            },
          },
        ],
      },
    ],
  },
};
```

## Examples

### Inline

```js
import txt from 'raw-loader!./file.txt';
```

Beware, if you already define loader(s) for extension(s) in `webpack.config.js` you should use:

```js
import css from '!!raw-loader!./file.txt'; // Adding `!!` to a request will disable all loaders specified in the configuration
```

## 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/raw-loader.svg
[npm-url]: https://npmjs.com/package/raw-loader
[node]: https://img.shields.io/node/v/raw-loader.svg
[node-url]: https://nodejs.org
[deps]: https://david-dm.org/webpack-contrib/raw-loader.svg
[deps-url]: https://david-dm.org/webpack-contrib/raw-loader
[tests]: https://github.com/webpack-contrib/raw-loader/workflows/raw-loader/badge.svg
[tests-url]: https://github.com/webpack-contrib/raw-loader/actions
[cover]: https://codecov.io/gh/webpack-contrib/raw-loader/branch/master/graph/badge.svg
[cover-url]: https://codecov.io/gh/webpack-contrib/raw-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=raw-loader
[size-url]: https://packagephobia.now.sh/result?p=raw-loader

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