Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/webpack-contrib/raw-loader
A loader for webpack that allows importing files as a String
https://github.com/webpack-contrib/raw-loader
files raw webpack-loader
Last synced: 3 days ago
JSON representation
A loader for webpack that allows importing files as a String
- Host: GitHub
- URL: https://github.com/webpack-contrib/raw-loader
- Owner: webpack-contrib
- License: mit
- Archived: true
- Created: 2012-04-06T10:26:20.000Z (over 12 years ago)
- Default Branch: master
- Last Pushed: 2021-03-08T18:31:52.000Z (over 3 years ago)
- Last Synced: 2024-10-20T06:58:05.078Z (15 days ago)
- Topics: files, raw, webpack-loader
- Language: JavaScript
- Homepage:
- Size: 1.44 MB
- Stars: 845
- Watchers: 16
- Forks: 90
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
[![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
**DEPREACTED for v5**: please consider migrating to [`asset modules`](https://webpack.js.org/guides/asset-modules/).
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