Skip to main content

Processing templates

Option: preprocessor

type Preprocessor = TemplateEngine | PreprocessorFn | false;

Specifies the built-in templating engine identifier, custom processing function, or disables template processing.

Valid values:

  • TemplateEngine: Built-in template engine identifier.
  • PreprocessorFn: Custom processing function.
  • false: Disables template processing entirely.

Default Configuration​

The default preprocessor uses Eta templating engine:

const { Eta } = require("eta");
const eta = new Eta({
  async: false,
  useWith: true,
  views: process.cwd(),
});
preprocessor = (content, { data }) => eta.renderString(content, data);

Template Engines​

type TemplateEngine = 'eta' | 'ejs' | 'handlebars' | 'nunjucks' | 'pug' | 'twig';

Supported engines use default configurations unless overridden in preprocessorOptions.

Custom Processing Function​

type PreprocessorFn = (
  content: string,
  loaderContext: LoaderContext<object> & {
    data: { [key: string]: any; } | string;
  },
) => string | Promise<any> | undefined;

Parameters:

  • content: Raw template content (string).
  • loaderContext:
    • mode: Webpack build mode (production/development/none).
    • rootContext: Webpack context path.
    • resource: Template file URL with query parameters.
    • resourcePath: Absolute template file path.
    • data: Custom template data (object or string).

Returns:

  • string: Synchronously processed content.
  • Promise: Asynchronously processed content.
  • undefined: Leaves original content unchanged.

Synchronous Processing Example:

{
  preprocessor: (content, { data }) => renderSync(content, data),
}

Asynchronous Processing Example:

{
  preprocessor: (content, { data }) =>
    new Promise((resolve) => {
      const result = renderAsync(content, data);
      resolve(result);
    }),
}

Disable Processing:

{
  preprocessor: false, // Only updates resource paths
}
info

The preprocessor option is the reference to loaderOptions.preprocessor.
The preprocessorOptions option is the reference to loaderOptions.preprocessorOptions.