https://github.com/morulus/complex-loader
Webpack loader that can combine result of multiple loaders into one object
https://github.com/morulus/complex-loader
combine loader webpack
Last synced: about 2 months ago
JSON representation
Webpack loader that can combine result of multiple loaders into one object
- Host: GitHub
- URL: https://github.com/morulus/complex-loader
- Owner: morulus
- License: mit
- Created: 2018-05-04T00:52:35.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T21:45:36.000Z (over 3 years ago)
- Last Synced: 2025-09-02T03:59:30.271Z (10 months ago)
- Topics: combine, loader, webpack
- Language: JavaScript
- Homepage:
- Size: 2.2 MB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
complex-loader
==
[](https://www.npmjs.com/package/complex-loader)
Combine results from multiple loaders into one object.
```js
{
test: /\.md$/,
exclude: /node_modules/,
use: {
loader : `complex-loader`,
options: {
attributes: [
`json-loader`,
`yaml-loader`,
{
loader : `front-matter-loader`,
options: {
onlyAttributes: true,
},
},
],
Component: [
{
loader : `markdown-feat-react-loader`,
options: {
config: require.resolve(`./react-markdown.config.js`),
importImages: true,
}
},
{
loader : `front-matter-loader`,
options: {
onlyBody: true,
},
},
]
},
}
}
```
Import all desired data about file by one import.
```js
import readme from 'readme.md'
console.log(readme)
/*
{
attributes: {...},
Component: function()
}
*/
```
Motivation
--
There is another similar loader called [combine-loader](https://github.com/elliottsj/combine-loader). But it allows you to specify loaders only in a string format. The reason for creating `complex-loader` was the support of defining loaders using javascript objects. This means that you can use functions, arrays, objects, and any others javascript entities.
Distant resources
--
If you are importing a resource from the outside the directory where *node_modules* have placed, specify loaders absolute paths by using `require.resolve`.
```js
[
require.resolve(`json-loader`),
require.resolve(`yaml-loader`)
]
```
This is because, on the nested level, the paths to the loaders will be resolved relative to the directory in which your file is located.
Self-nesting
--
You can specify as nested loader the same `complex-loader`.
```js
{
test: /\.png/,
exclude: /node_modules/,
use: {
loader : `complex-loader`,
options: {
deeper: {
loader: `complex-loader`,
options: {
and: {
loader: `complex-loader`,
options: {
deeper: 'url-loader'
}
}
}
}
}
}
}
// Will give:
/*
{
deeper: {
and: {
deeper: 'path/to/file.png'
}
}
}
*/
```
Author and license
--
Vladimir Kalmykov
Under [MIT](https://github.com/morulus/complex-loader/blob/master/LICENSE) license, 2018
See also
--
- [invoke-loader](https://github.com/morulus/invoke-loader) Resolve and invoke loader and options, the paths to which are specified in the options
- [git-commits-loader](https://github.com/morulus/git-commits-loader) Collect information about file commits
- [markdown-heading-loader](https://github.com/morulus/markdown-heading-loader) Just get primary heading of markdown document
- [markdown-feat-react-loader](https://github.com/morulus/markdown-feat-react-loader) Use React components directly in markdown