Combine results from multiple loaders into one object.
{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.
importreadmefrom'readme.md'console.log(readme)/*{ attributes: {...}, Component: function()}*/There is another similar loader called 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.
If you are importing a resource from the outside the directory where node_modules have placed, specify loaders absolute paths by using require.resolve.
[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.
You can specify as nested loader the same complex-loader.
{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' } }}*/Vladimir Kalmykov vladimirmorulus@gmail.com
Under MIT license, 2018
- invoke-loader Resolve and invoke loader and options, the paths to which are specified in the options
- git-commits-loader Collect information about file commits
- markdown-heading-loader Just get primary heading of markdown document
- markdown-feat-react-loader Use React components directly in markdown