combine-loader

webpack loader to combine results from multiple loaders into one object

Installation

npm install combine-loader

Usage

In your webpack configuration, pass an object as the options for combine-loader. Each key-value pair corresponds to the same key in the exported object, using the provided loader string value to load the file. For example:

module.exports = {
  // ...
  module: {
    // ...
    rules: [
      {
        test: /\.md$/,
        loader: 'combine-loader',
        options: {
          raw: 'raw-loader',
          frontmatter: [
            'json-loader',
            'front-matter-loader?{"onlyAttributes":true}',
          ],
          content: [
            'html-loader',
            'markdown-it-loader',
            'front-matter-loader?{"onlyBody":true}',
          ],
        },
      },
    ],
  },
};

In the above example, the final exported value for .md files is an object with keys raw, frontmatter, and content, with values loaded using the provided loaders. In other words, this...

const example = require('./example.md');

...is effectively equivalent to this:

const example = {
  raw: require('!raw-loader!./example.md'),
  frontmatter: require('!json-loader!front-matter-loader?{"onlyAttributes":true}!./example.md'),
  content: require('!html-loader!markdown-it-loader!front-matter-loader?{"onlyBody":true}!./example.md'),
};

NOTE: ! is prepended to override loaders in webpack's config