1. raw-loader
A loader for webpack that allows importing files as a String
raw-loader
Package: raw-loader
Created by: webpack-contrib
Last modified: Fri, 21 Jul 2023 15:51:35 GMT
Version: 4.0.2
License: MIT
Downloads: 15,869,333
Repository: https://github.com/webpack-contrib/raw-loader

Install

npm install raw-loader
yarn add raw-loader

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

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

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin