source-modifier-loader

A customizable Webpack/Rspack loader to modify source files on-the-fly with your own callback function.

📦 Installation

npm install source-modifier-loader --save-dev
# or
yarn add source-modifier-loader --dev

🚀 Usage

Webpack / Rspack configuration

module.exports = {
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: 'source-modifier-loader',
                        options: {
                            modify: (source, resourcePath) => {
                                return source.replace('foo', 'bar');
                            },
                        },
                    }
                ],
            },
        ],
    },
};

⚙️ Loader Options

| Name | Type | Description | |----------|---------------------------------------------------|--------------------------------------------------------| | modify | (source: string, resourcePath: string) => string \| void \| null \| undefined | A callback function to modify source contents. |

Arguments provided to modify callback:

• source (string): Original file content.
• resourcePath (string): Absolute path to the file being processed.

If the callback returns a string, the original content will be replaced by it. If the callback returns null, undefined, or anything except a string, the original content remains unchanged.

🚨 When to use

Use this loader when you need to:

• Dynamically modify file contents based on file path or source code.
• Conditionally insert or alter specific content in source files before other loaders.
• Easily implement custom transformations without writing separate loaders.

🧪 Testing

This loader includes tests written with Jest:

npm test

🤝 Compatibility

• ✅ Webpack 5
• ✅ Rspack

Tested and fully compatible with both bundlers.

🔧 Development

Install dependencies:

npm install

Run tests:

npm test

Build the loader:

npm run build