loaders.md

title	parent	nav_order
Loaders Module	Modules	3

Loaders Module

const { loaders } = require( '@humanmade/webpack-helpers' );

This module provides functions that generate configurations for commonly-needed Webpack loaders. Use them within the .module.rules array, or use presets.development()/presets.production() to opt-in to some opinionated defaults.

• loaders.asset(): Return a configured Webpack module loader rule for asset modules which will be inlined when small enough.
• loaders.css(): Return a configured Webpack module loader rule for css-loader.
• loaders.js(): Return a configured Webpack module loader rule for js-loader.
• loaders.postcss(): Return a configured Webpack module loader rule for postcss-loader.
• loaders.resource(): Return a configured Webpack module loader rule for asset/resource modules.
• loaders.sass(): Return a configured Webpack module loader rule for sass-loader.
• loaders.sourcemap(): Return a configured Webpack module loader rule for source-map-loader.
• loaders.style(): Return a configured Webpack module loader rule for style-loader.
• loaders.ts(): Return a configured Webpack module loader rule for ts-loader.

The output from these loaders can optionally be filtered.

Customizing Loaders

Any properties passed into the loader method will be merged into the resulting configuration object.

const { helpers, loaders } = require( '@humanmade/webpack-helpers' );
module.exports = {
	// ...
	module: {
		rules: [
			loaders.js( {
				include: helpers.filePath( 'themes/my-theme/src' ),
				options: {
					// Specify custom babel-loader options
				},
			} );
		],
	},
};

To alter the configuration for a loader prior to use within a preset, you may either filter the default loader options, or the final merged loader configuration.

const { helpers, loaders, presets } = require( '@humanmade/webpack-helpers' );
const { addFilter } = helpers;

// Adjust the loader defaults.
addFilter( 'loaders/js/defaults', ( defaults ) => ( {
	...defaults,
	include: helpers.filePath( 'themes/my-theme/src' ),
} ) );

addFilter( 'loaders/css/defaults', ( defaults ) => {
	defaults.options.url = false;
	return defaults;
} );

// The above customizations will now apply to all calls to loader or preset factories.
module.exports = presets.development( { /* ... */ } );

These loaders are also used by the presets methods described above. To adjust the behavior of a loader for a specific configuration generated using a preset, see "Customizing Presets".