Introduction to Loader-utils

loader-utils is an essential utility library for webpack
and other JavaScript module bundlers. It provides a collection of utility
functions that are indispensable for loader development.

Useful loader-utils APIs

1. getOptions

Retrieves the options passed to the loader.

  const { getOptions } = require('loader-utils');
  module.exports = function(source) {
    const options = getOptions(this);
    console.log(options);
    return source;
  };

2. interpolateName

Generates a name using webpack’s placeholder interpolation.

  const { interpolateName } = require('loader-utils');
  module.exports = function(source) {
    const name = interpolateName(this, '[name].[hash].[ext]', { content: source });
    console.log(name);
    return source;
  };

3. parseQuery

Parses a query string into an object.

  const { parseQuery } = require('loader-utils');
  module.exports = function(source) {
    const query = parseQuery(this.resourceQuery);
    console.log(query);
    return source;
  };

4. getRemainingRequest

Returns the remaining request string.

  const { getRemainingRequest } = require('loader-utils');
  module.exports = function(source) {
    const remainingRequest = getRemainingRequest(this);
    console.log(remainingRequest);
    return source;
  };

5. getCurrentRequest

Returns the current request string.

  const { getCurrentRequest } = require('loader-utils');
  module.exports = function(source) {
    const currentRequest = getCurrentRequest(this);
    console.log(currentRequest);
    return source;
  };

6. stringifyRequest

Converts a request to a string that can be used in a require statement.

  const { stringifyRequest } = require('loader-utils');
  module.exports = function(source) {
    const request = stringifyRequest(this, 'path/to/module');
    console.log(request);
    return source;
  };

7. urlToRequest

Converts a URL to a webpack module request.

  const { urlToRequest } = require('loader-utils');
  module.exports = function(source) {
    const request = urlToRequest('https://example.com/image.png');
    console.log(request);
    return source;
  };

8. getHashDigest

Generates a hash digest of given content.

  const { getHashDigest } = require('loader-utils');
  module.exports = function(source) {
    const hash = getHashDigest(source, 'md5', 'hex', 8);
    console.log(hash);
    return source;
  };

App Example with loader-utils

Here is an example of a webpack loader that uses multiple loader-utils APIs.

  const { getOptions, interpolateName, getHashDigest } = require('loader-utils');
  
  module.exports = function(source) {
    const options = getOptions(this);
    const name = interpolateName(this, options.name || '[name].[ext]', { content: source });
    const hash = getHashDigest(source, options.hashType || 'md5', 'hex', 8);
    
    console.log(`Generated name: ${name}`);
    console.log(`Generated hash: ${hash}`);
    
    // Further processing of the source ...
    return source;
  };

With these utilities, you can handle loader configurations, name interpolations,
and hashing more efficiently, leading to better modular code structure and easier debugging.