Introduction to loader-utils

loader-utils is a collection of utilities for webpack loaders. It provides a range of utilities and helper functions that assist in building custom loaders for webpack. These utilities simplify the process of writing and managing loaders, which helps enhance the overall development workflow.

API Examples

1. getOptions

Retrieve loader options passed by the loader.

  const loaderUtils = require('loader-utils');
  function loader(source) {
    const options = loaderUtils.getOptions(this);
    return source;
  }

2. parseQuery

Parse a query string into an object.

  const loaderUtils = require('loader-utils');
  const query = '?name=example';
  const parsedQuery = loaderUtils.parseQuery(query);
  console.log(parsedQuery); // { name: 'example' }

3. stringifyRequest

Stringify an absolute request path.

  const loaderUtils = require('loader-utils');
  const context = { resourcePath: '/path/to/resource' };
  const request = loaderUtils.stringifyRequest(context, './module');
  console.log(request);

4. urlToRequest

Convert an URL to a request for webpack.

  const loaderUtils = require('loader-utils');
  const url = 'https://example.com/image.png';
  const request = loaderUtils.urlToRequest(url);
  console.log(request); // '~https://example.com/image.png'

5. interpolateName

Generates a filename string from a pattern and specified options.

  const loaderUtils = require('loader-utils');
  const interpolatedName = loaderUtils.interpolateName(this, '[name].[ext]', {
    content: 'fileContent',
  });
  console.log(interpolatedName); // 'file.txt'

Application Example

Let’s create a simple webpack loader that utilizes these utilities.

  const loaderUtils = require('loader-utils');
  module.exports = function(source) {
    const options = loaderUtils.getOptions(this);
    const interpolatedName = loaderUtils.interpolateName(this, options.namePattern, {
      content: source,
    });
    return source.replace(/\[name\]/g, interpolatedName);
  };

This custom loader uses loader-utils APIs to replace instances of “[name]” in the source code with an interpolated name based on a specified pattern.

By leveraging these utilities, we can create powerful and flexible loaders for various use cases in our webpack configurations.

Hash: f7e2fb38b7661b383abf6959ab321cb6932d70e173bc4efbe2b667b6a8505d1d