import { Tabs, Tab } from '@theme';

ResolveLoader

This configuration item is consistent in type with resolve, but this setting only affects the resolution of loaders.

Type: Consistent with resolve
Default:

{
  conditionNames: ["loader", "require", "node"],
  exportsFields: ["exports"],
  mainFields: ["loader", "main"],
  extensions: [".js"],
  mainFiles: ["index"]
}

Example

For example, if you are developing a loader and want to showcase its usage from a user's perspective in an example, you can write:

import { createRequire } from 'node:module';

const require = createRequire(import.meta.url);

export default {
  resolveLoader: {
    alias: {
      'amazing-loader': require.resolve('path-to-your-amazing-loader'),
    },
  },
};

</Tab> <Tab label="CJS">

module.exports = {
  resolveLoader: {
    alias: {
      'amazing-loader': require.resolve('path-to-your-amazing-loader'),
    },
  },
};

</Tab> </Tabs>

Then, in the example code, you can write:

require('!!amazing-loader!./amazing-file.js');

::: info Inline Loaders The loader mentioned above uses the syntax of inline loaders. For details, please refer to here. :::