native-raw-loader

native-raw-loader

DEPREACTED for v5: please consider migrating to asset modules.

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

Getting Started

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

$ npm install native-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: 'native-raw-loader',
      },
    ],
  },
};

And run webpack via your preferred method.

Options

Name	Type	Default	Description
esModule	{Boolean}	true	Uses ES modules syntax
native	{Boolean}	true	Uses native import

esModule

Type: Boolean Default: true

By default, native-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: 'native-raw-loader',
            options: {
              esModule: false,
            },
          },
        ],
      },
    ],
  },
};

native

Type: Boolean Default: true

By default, native-raw-loader generates JS modules that use the ES modules syntax. There are some cases in which using native import is beneficial, so you can import a native fill with out any changes.

You can enable this using:

webpack.config.js

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

Examples

Inline

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

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

import css from '!!native-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