Introduction to `loader-utils`

`loader-utils` is a collection of utilities for webpack loaders, offering several significant methods to make development easier. With features that optimize your workflow, `loader-utils` is a must-have for any webpack user.

Key APIs in `loader-utils`

1. `getOptions(loaderContext)`

This method is used to fetch the options passed to your loader. Options can be specified in the webpack configuration file, which the loader can then access to customize its behavior.

const { getOptions } = require('loader-utils');
module.exports = function(source) {
    const options = getOptions(this);
    // Use options to customize loader behavior
    return source;
};

2. `interpolateName(loaderContext, name, options)`

This function can generate a name for a resource based on the content hash, making it easier to manage file names dynamically.

const { interpolateName } = require('loader-utils');
module.exports = function(source) {
    const name = interpolateName(this, '[name].[hash].[ext]', { content: source });
    this.emitFile(name, source);
    return \`export default \${JSON.stringify(name)};\`;
};

3. `parseQuery(query)`

This method parses a query string like `?name=value&key=val` into an object.

const { parseQuery } = require('loader-utils');
module.exports = function(source) {
    const query = this.resourceQuery ? parseQuery(this.resourceQuery) : {};
    // Retrieve and handle query parameters
    return source;
};

Full Example Application using `loader-utils`

Let’s create a simple webpack loader that uses the above methods to transform image file names based on their content hashes and query parameters.

const { getOptions, interpolateName, parseQuery } = require('loader-utils');
const fs = require('fs');

module.exports = function(source) {
    const options = getOptions(this);
    const query = this.resourceQuery ? parseQuery(this.resourceQuery) : {};
    
    // Generate a name for the file based on content hash
    const name = interpolateName(this, options.name || '[name].[hash].[ext]', { content: source });
    
    // For demonstration, we're reading from the filesystem if specified in the query parameter
    if (query.readFromFile && fs.existsSync(query.readFromFile)) {
        source = fs.readFileSync(query.readFromFile);
    }
    
    this.emitFile(name, source);
    return \`export default \${JSON.stringify(name)};\`;
};

Webpack Configuration

Here’s how you can configure webpack to use this custom loader:

module.exports = {
    module: {
        rules: [
            {
                test: /\.(png|jpe?g|gif)$/,
                use: [
                    {
                        loader: path.resolve('path/to/our/custom-loader.js'),
                        options: {
                            name: '[name].[hash].[ext]',
                        },
                    },
                ],
            },
        ],
    },
};

This demonstrates how powerful and flexible `loader-utils` can be in your webpack toolchain.

Hash: f7e2fb38b7661b383abf6959ab321cb6932d70e173bc4efbe2b667b6a8505d1d