raw-loader

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

Name	Type	Default	Description
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 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

Changelog

4.0.2 (2020-10-09)

Chore

• update schema-utils

Similar packages

Other packages similar to raw-loader

to-string-loader

Similar to `raw-loader`, `to-string-loader` converts files to a string, but it is often used in conjunction with other loaders, such as `css-loader` for stylesheets. It allows for more flexibility in handling different types of files as strings.

val-loader

The `val-loader` executes code as a module and can be used to generate code strings dynamically. While it serves a different primary purpose compared to `raw-loader`, it offers an alternative approach to embedding dynamic content in JavaScript bundles.

html-loader

The `html-loader` handles HTML files, similar to how `raw-loader` can be used for HTML templates. However, `html-loader` also processes images and links within the HTML, resolving `src` and `href` as module requests, providing more comprehensive handling of HTML files.