Socket
Socket
Sign inDemoInstall

raw-loader

Package Overview
Dependencies
81
Maintainers
8
Versions
18
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    raw-loader

A loader for webpack that allows importing files as a String


Version published
Weekly downloads
3.8M
decreased by-1.05%
Maintainers
8
Install size
1.97 MB
Created
Weekly downloads
 

Package description

What is raw-loader?

The `raw-loader` npm package is used to import files as a string in JavaScript modules. It is commonly used in web development projects to include file contents directly into JavaScript code, such as importing HTML, CSS, or SVG files. This can be particularly useful for embedding small templates, styles, or assets directly into JavaScript bundles without the need for separate HTTP requests to load these resources.

What are raw-loader's main functionalities?

Importing text files

This feature allows you to import the contents of text files, such as `.txt` files, directly into your JavaScript code as a string. This can be useful for embedding static text resources.

import myText from './file.txt';

Importing HTML templates

With `raw-loader`, you can import HTML templates directly into your JavaScript modules. This is particularly useful in frameworks or libraries that allow for template strings, enabling you to keep HTML templates in separate files for better organization.

import myTemplate from './template.html';

Importing CSS as a string

This feature allows importing CSS files as strings. This can be useful for injecting styles directly into the DOM using JavaScript, or for use with CSS-in-JS libraries that accept CSS as a string.

import styles from './styles.css';

Other packages similar to raw-loader

Changelog

Source

4.0.2 (2020-10-09)

Chore

  • update schema-utils

Readme

Source

npm node deps tests coverage chat size

raw-loader

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

Getting Started

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

$ npm install raw-loader --save-dev

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

file.js

import txt from './file.txt';

webpack.config.js

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

And run webpack via your preferred method.

Options

NameTypeDefaultDescription
esModule{Boolean}trueUses 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 and tree shaking.

You can enable a CommonJS module syntax using:

webpack.config.js

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

Examples

Inline

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

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

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

License

MIT

Keywords

FAQs

Last updated on 09 Oct 2020

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc