Awesome
<div align="center"> <img width="200" height="200" src="https://cdn3.iconfinder.com/data/icons/lexter-flat-colorfull-file-formats/56/raw-256.png"> <a href="https://github.com/webpack/webpack"> <img width="200" height="200" src="https://webpack.js.org/assets/icon-square-big.svg"> </a> </div>raw-loader
DEPREACTED for v5: please consider migrating to asset modules
.
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.